CSS3 transition-delay Property

Browser Support

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

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

Attribute definition and usage instructions

transition-delay is a CSS3 property used to specify the delay before a transition effect begins. It defines the delay time after an element's state changes before the transition effect starts to apply, allowing you to control when the transition effect begins.

The value of this property can be in seconds (s) or milliseconds (ms), representing the delay time of the transition effect.

For example, if you want to wait 0.5 seconds after a state change before the transition effect begins, you can write:

.element {
  transition-delay: 0.5s;
}

If you want the transition effect to start immediately without any delay, you can set the value to 0:

.element {
  transition-delay: 0s;
}

You can also specify different delay times for each property. For example, if you want the transition effect for width changes to be delayed by 0.3 seconds and the transition effect for height changes to be delayed by 0.5 seconds, you can write:

.element {
  transition-property: width, height;
  transition-delay: 0.3s, 0.5s;
}

In this case, the transition effect for width changes will begin after a 0.3-second wait following the state change, while the transition effect for height changes will begin after a 0.5-second wait.

By adjusting the transition-delay property, you can control the delay time of transition effects, enabling more precise animations.

Syntax