CSS3 transition-duration Property

Browser Support

The numbers in the table indicate the first browser version that supports the property.

The number immediately preceding -webkit-, -ms-, or -moz- is the first browser version that supports the prefixed property.

Attribute definition and usage instructions

transition-duration is a CSS3 property used to specify the duration of a transition effect. It defines the length of time the transition effect takes from start to end, making the transition smoother and more natural.

The value of this property can be in seconds (s) or milliseconds (ms), representing the duration of the transition effect. Decimal values can be used to define a more precise duration.

For example, if you want the transition effect to last 1 second, you can write:

.element {
  transition-duration: 1s;
}

If you want the transition effect to last 500 milliseconds, you can write:

.element {
  transition-duration: 500ms;
}

You can also apply multiple transition effects to one element at the same time, and specify a different duration for each transition effect. This can be achieved with comma-separated values:

.element {
  transition-property: width, height, opacity;
  transition-duration: 0.5s, 1s, 0.3s;
}

In this way, the transition effect for the width change lasts 0.5 seconds, the transition effect for the height change lasts 1 second, and the transition effect for the opacity change lasts 0.3 seconds.

By adjusting the transition-duration property, you can control the speed and smoothness of transition effects, thereby creating more attractive user interface interactions.

Syntax