HTML Dog
Skip to navigation

CSS Property: transition-property

The property, or properties, on which transitions — the gradual change of appearance over time — should be applied.

Possible Values

ValueDescriptionExample
[Property name]The property that should transition.color
[Property name][Property name]Multiple property names can be separated by commas.color, background, opacity
allAll properties should transition. Default.
noneNo properties should transition.
inherit
initial
unset

Example


a {
    color: rgba(255,0,0,.5);
    transition-property: color;
    transition-duration: .3s;
}
/* A semi-transparent red link with a quick transition applied to the color property. */

a:hover {
    color: rgba(255,0,0,1);
}
/* When hovered over, the color of the link will gradually turn solid red over 0.3 seconds.  */

Browser support

Can I Use css-transitions? Data on support for the css-transitions feature across the major browsers from caniuse.com.