CSS transition-duration Property

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.

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:

General Info