CSS 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;
