CSS transition-duration Property
The transition-duration CSS property specifies how long it should take to transition from one state to another. So, if you want to change the background color of an element, transition-duration will do so gradually, fading from one color to the other.
The element will simply snap from the first to the second state if transition-duration is set to 0s. Thus, transition-duration is the master transition property; without it, nothing works.
Syntax
Property Values
| Value | Description |
|---|---|
| time | Specifies how many seconds or milliseconds it takes for a transition effect to complete. The default value is 0s, which means there will be no effect. |
| initial | This property is set to its default value. |
| inherit | This property is inherited from its parent element. |
Supported Browsers
| Property | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| transition-duration |
26.0
4.0 -webkit- |
16.0
4.0 -moz- |
6.1
3.1 -webkit- |
10.0 |
12.1
10.5 -o- |