HTML Dog
Skip to navigation

CSS Property: transition

A gradual change of appearance over time. Allows a link to animate from one color to another when it is hovered over, for example.

A shorthand property that combines:

Possible Values

A list of transition characteristic sub-values. Possible sub-values follow the same rules as possible values for corresponding aforementioned properties. The sub-value list follows a specific order:

[property] [duration] [timing-function] [delay]

Full example: color .3s linear 1s

Not all values are required. Only a duration is necessary for the transition to take effect. .3s on its own is equivalent to all .3s ease 0s, for example.

inherit, initial, or unset can also be used on their lonesome.

Multiple Values

Different transitions can be applied to different properties by applying a comma-separated list.

Example: color .3s linear 1s, background .2s ease-in 1s, opacity .3s

Example


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

a:hover {
    color: rgba(255,0,0,1);
}
/* The color of the link will take 0.3s to turn solid red at a constant speed one second after being hovered over.  */

Browser support

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