Instead of a value’s normal behavior to change immediately it is faded smoothly.
-webkit-transitionSafari 5+ iOS 3.2+ Android 2.1+ Blackberry 7+
transitionFirefox 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+
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
- 1 The CSS property to be transitioned. Many of the available properties can be animated. Can also be
allif all given properties for an element should be transitioned, for example
widthat the same time. If set to
noneno transition is executed.
- 2 The transition lasts
2seconds (the duration). Defaults to
0meaning that there is no transition at all (like the normal behavior of a status change). Negative values are not allowed.
- 3 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
linearwithout an acceleration or a slowdown. Defaults to
easewhich results in a fast beginning and a slowdown at the end.
ease-outis quite the same but not so fast at the beginning.
ease-inaccelerates the animation smoothly at the beginning with no slowdown at the end. At last
ease-in-outstands 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
- 4 Optional. The transition starts with a delay of
0.5seconds. If not set or set to
0it will begin immediately, if negative it will begin part-way through its play cycle.
Results in the same transition like above.
Multiple transitions set
transition: 1 width 3s, 2 opacity 2s 3s ease-in
- 1 The
widthof the element is transitioned over a period of
transition-timing-functionare absent the animation starts immediately with a acceleration at the beginning and a slowdown at the end (
ease, standard value).
- 2 The transition of the element’s
2seconds and starts after
3seconds. That is, that the animation of the
opacitystarts not until the animation of the
widthis already over. At last it has smooth acceleration at the beginning and no slowdown at the end (