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. */