transition-duration

The 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.

.example {
    transition-duration: 3s;
}

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 transition-duration is 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:

Check out this Pen!

For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:

.example {
    -webkit-transition-duration: 700ms;
    -moz-transition-duration: 700ms;
    -o-transition-duration: 700ms;
    transition-duration: 700ms;
}

IE10 (the first stable version of IE to support transition-duration) does not require the -ms- prefix.

Related Properties

• transition
• transition-property
• transition-timing-function
• transition-delay

Other Resources

• transition-duration on W3C
• transition-duration on MDN

Browser Support