Transitions

Syntax

• transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

Parameters

Parameter | Details | ––––––––––––– | —— | transition-property | The specific CSS property whose value change needs to be transitioned (or) all, if all the transitionable properties need to be transitioned. | transition-duration | The duration (or period) in seconds (s) or milliseconds (ms) over which the transition must take place. | transition-timing-function | A function that describes how the intermediate values during the transition are calculated. Commonly used values are ease, ease-in, ease-out, ease-in-out, linear, cubic-bezier(), steps(). More information about the various timing functions can be found in the W3C specs.| transition-delay | The amount of time that must have elapsed before the transition can start. Can be specified in seconds (s) or milliseconds (ms) |

Remarks

Some older browsers support only vendor-prefixed transition properties:

• -webkit: Chrome 25-, Safari 6-, Safari & Chrome for iOS 6.1-, Android 4.3- Browser, Blackberry Browser 7-, UC Browser 9.9- for Android.
• -moz: Firefox 15-.
• -o: Opera 11.5-, Opera Mobile 12-.

Example:

-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;