transition-duration property is used to specify the number of seconds or milliseconds a transition animation should take to complete. In other words, this property is used to determine the amount of time taken by an element to transition from the old value of a property to its new value. By default, the value is 0s, meaning that no animation will occur.
The initial value of CSS
transition-duration property is 0s. You can apply it to all elements including
::after pseudo-elements. This property is not inheritable. The final computed value of the
transition-duration property is the exact same value that you initially supplied. This property is not animatable.
You may specify multiple comma-separated durations as a value for this property. Each duration will be applied to the corresponding property as specified by the
transition-property property, which acts as a master list. If there are fewer durations specified than in the master list, the user agent will start repeating the list of durations. If there are more durations, the list is simply truncated to the right size. The CSS declaration stays valid in both the cases.
This is the formal syntax for using transition-duration property.
transition-duration: <time> [, <time>]*
Here are some examples of using this property.
/* <time> values */ transition-duration: 6s; transition-duration: 120ms; transition-duration: 1s, 15s; transition-duration: 10s, 30s, 230ms; /* Global values */ transition-duration: inherit; transition-duration: initial; transition-duration: unset;
In this case, a
<time> value is given which specifies the amount of time for the transition to occur from the old value to the new value. The default vale is ‘0s’ which means that the transition between two states will be instantaneous. In other words, there will be no animation. A negative value is not allowed and providing a negative value will make the declaration invalid.
The CSS3 Transitions property is fully supported in 94.29% browsers and partially supported in 0% browsers. Therefore, its overall browser support is 94.29%.
This property is fully supported in IE 10+, Edge 12+, Firefox 16+, Chrome 26+, Safari 7+, Opera 15+, iOS Safari 8+, Android 53+ and Chrome for Android 56+. Support listed is for
transition properties as well as the
In Chrome (up to 43.0), for CSS
transition-delay property, either explicitly specified or written within transition property, the unit cannot be omitted even if the value is 0.
IE10 & IE11 are reported to not support transitioning the
Browser support data has been taken from caniuse.com.
- Read more about the CSS
<transition-duration>property on MDN.
- You can also read the CSS
<transition-duration>property on CSSWG.
2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.