📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣
transition-duration property, normally used as part of
transition shorthand, is used to define the duration of a specified transition. That is, the length of time it will take for the targeted element to transition between two defined states.
The value can be one of the following:
- A valid time value (defined in seconds or milliseconds)
- A comma-separated list of time values, for transitioning multiple properties on a single element
The default value for
0s, meaning that no transition will take place and the property change will take place immediately, even if the other transition-related properties are defined. The time value can be expressed as a decimal-based number for more precise timing and negative values are not allowed.
The following CodePen shows a hover effect on a box that uses a
transition-duration value of
1s to gradually change the background color:
For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:
IE10 (the first stable version of IE to support
transition-duration) does not require the