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.




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-
4.0 -moz-
3.1 -webkit-
10.0 12.1
10.5 -o-