CSS transition-delay property

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.

Syntax

The default value of the transition-delay property is 0, which means that the transition will start to occur immediately without any delay.

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.

Let's see some examples of the transition-delay property.

Example1

In this example, we are using the transition-property, transition-duration, and transition-delay properties. There is a delay of 0.5s to start the transition effect, i.e., the background color of the div element will be changed after the given amount of time.

Output

Example2

In this example, there are two div elements. In the first div we are using the value initial of the transition-delay property. In the second div, we are applying the negative value of the transition-delay property, i.e., -2s. We have to move the cursor over the div elements to see the transition effect.

Output

Example

Now, there is another example in which there is a multiple transition effect. Here, the transition effects on width, height, and transformation. There is also a transition-delay in the milliseconds (ms), i.e., 2.5ms.

Output