transition

Instead of a values normal behavior to change immediately it is faded smoothly.

-webkit-transition Safari 5+ iOS 3.2+ Android 2.1+ Blackberry 7+
transition Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+ IE Mobile 10+

Not supported by Internet Explorer prior to version 10 and Opera Mini. For detailed compatibility info see caniuse.com.

Firefox 16+Safari 5+Chrome 26+Internet Explorer 10+Opera 12.1+
iOS 3.2+Android 2.1+Blackberry 7+IE Mobile 10+

Combined notation

Multiple transitions can be specified comma separated. There is also the possibility for separated notations.

transition: 1 background-color 2 2s 3 linear 4 0.5s

The CSS property to be transitioned. Many of the available properties can be animated. Can also be all if all given properties for an element should be transitioned, for example background-color and width at the same time. If set to none no transition is executed.
The transition lasts 2 seconds (the duration). Defaults to 0 meaning that there is no transition at all (like the normal behavior of a status change). Negative values are not allowed.
Optional. The timing-function, which describes how the transition will proceed over its duration. It is specified using a bezier curve (and can also be set as one). At the given example the animation is played linear without an acceleration or a slowdown. Defaults to ease which results in a fast beginning and a slowdown at the end. ease-out is quite the same but not so fast at the beginning. ease-in accelerates the animation smoothly at the beginning with no slowdown at the end. At last ease-in-out stands for an acceleration at the beginning and a slowdown at the end.
There is also the possibility of step-values, which let the animation jump between the individual keyframes instead of a smooth transition. For example to get an animation with 8 frames, you can use steps(8) (example).
Optional. The transition starts with a delay of 0.5 seconds. If not set or set to 0 it will begin immediately, if negative it will begin part-way through its play cycle.

Separated notations

Results in the same transition like above.

Multiple transitions set

transition: 1 width 3s, 2 opacity 2s 3s ease-in

The width of the element is transitioned over a period of 3 seconds. Since transition-duration and transition-timing-function are absent the animation starts immediately with a acceleration at the beginning and a slowdown at the end (ease, standard value).
The transition of the elements opacity lasts 2 seconds and starts after 3 seconds. That is, that the animation of the opacity starts not until the animation of the width is already over. At last it has smooth acceleration at the beginning and no slowdown at the end (ease-in).

CSS 3 Files