CSS transition-delay Property

The CSS transition-delay property is used to specify the amount of time to wait between a change being requested to a property that is to be transitioned and the start of the transition effect. A value of 0s, or 0ms, indicates that the property will begin to animate its transition immediately. Positive values will delay the start of the transition effect for the corresponding number of seconds. Negative values cause the transition to begin immediately, but to cause the transition to seem to begin partway through the animation effect.

The initial value of CSS transition-delay property is 0s. You can apply it to all elements including ::before and ::after pseudo-elements. This property is not inheritable. The final computed value of the transition-delay property is the exact same value that you initially supplied. This property is not animatable.

Syntax

This is the formal syntax for using transition-delay property.

transition-delay: <time> [, <time>]*

Here are some examples of using this property.

/* <time> values */
transition-delay: 3s;
transition-delay: 2s, 4ms;

/* Global values */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;

Acceptable Values

<time>

A

The time offset can be negative. If it is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset.

Is a

Working Examples

See the Pen CSS transition-delay Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS3 Transitions property is fully supported in 94.29% browsers and partially supported in 0% browsers. Therefore, its overall browser support is 94.29%.

This property is fully supported in IE 10+, Edge 12+, Firefox 16+, Chrome 26+, Safari 7+, Opera 15+, iOS Safari 8+, Android 53+ and Chrome for Android 56+. Support listed is for transition properties as well as the transitionend event.

Transitionable properties with calc() derived values are not supported below and including IE11. IE11 does not support CSS transitions on the SVG fill property.

In Chrome (up to 43.0), for CSS transition-delay property, either explicitly specified or written within transition property, the unit cannot be omitted even if the value is 0.

IE10 & IE11 are reported to not support transitioning the column-count property.

Browser support data has been taken from caniuse.com.

Further Reading

  1. Read more about the CSS <transition-delay> property on MDN.
  2. You can also read the CSS <transition-delay> property on CSSWG.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top