CSS transition-delay property
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.
The default value of the transition-delay property is 0, which means that the transition will start to occur immediately without any delay.
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.
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.Test it Now
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.Test it Now
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.Test it Now
Next TopicCSS Animation