CSS transition-delay Property

The transition-delay property specifies when the transition effect will start.

This CSS property specifies the duration to start the transition effect. The value of this property is defined as either seconds (s) or milliseconds (ms). The CSS transitions are effects that are added to change the element gradually from one style to another, without using flash or JavaScript.

Without using the transition-delay, the animation will start with the hover on the element, but using this CSS property, we can delay the animation by an amount of time.

CSS Syntax

transition-delay: time|initial|inherit;

Property values

time: It specifies the amount of time (in seconds or milliseconds) to wait before the transition starts.

initial: It sets this property to its default value.

inherit: It inherits this property from its parent element.

The delay can be negative, positive, or zero.

The negative value of the transition-delay property will immediately start the transition effect i.e., the effect will be animated as though it had already begun. The positive value of this property causes the transition effect to start for the given time.

We can specify multiple delays that are helpful when transitioning several properties. Each delay will be applied to the related property, as defined by the transition-property property. For example, suppose we provide two transition-delay values. The first value affects the first property given by the transition-property property. The second transition-delay affects the second property from the list of property names given by the transition property.

Example -