CSS transition-duration property specifies how much time a transition will take to complete its once cycle. The transition duration can be specified in seconds(s) or milliseconds(ms).
Hover over the below elements to see the transition-duration effect.
transition-duration: 2s
transition-duration: 4s
Example:
.div1{
transition-duration: 2s;
transition-property: width;
}
.div2{
transition-duration: 4s;
transition-property: width;
}
The transition-duration property can also accept multiple values. In this case, each transition duration will be applicable only to its corresponding transition property. See the example below:
Example:
div{
transition-duration: 1s, 2s, 3s;
transition-property: background-color, width, height;
}
If the number of durations specified is fewer than the number of transition properties, the last duration value will be repeated for those properties which are not specified with any duration value.
If only one duration value is specified, all transition properties will use the same duration value. See the example below:
Example:
.div1{
transition-duration: 2s 3s;
transition-property: width, height, background-color;
}
.div2{
transition-duration: 2s;
transition-property: width, height, background-color;
}
If the number of transition durations specified is more than the specified transition properties, the extra duration values(values starting from last) are omitted.
Example:
div{
transition-duration: 2s, 3s, 4s, 5s;
transition-property: background-color, width;
}
CSS Syntax
The transition-duration property has the following syntax:
transition-duration: time | initial | inherit;
Property Values
The transition-duration property accepts the following values:
| time | Specifies the time taken by a transition to complete. It can be specified in seconds(s) or milliseconds(ms). |
| initial | Sets the transition-duration property to its default value(0). |
| inherit | Inherits the transition-duration property from its parent element. |
General Info
| Default Value | 0 |
| Inherited | No |
| JavaScript Usage | element.style.transitionDuration = “2s” |
