How to use animation-delay in CSS ?
In this article, we will see how to use the animation-delay property in CSS. The animation-delay property is used to set the animations on the web pages.
- The animation-delay property tells us about the delay in the start of an animation.
- The animation-delay value is defined in milliseconds (ms) or seconds (s).
- Its default value is 0 seconds.
- The property is very useful in making the webpages attractive
animation-delay: time |initial |inherit;
- time: This value is optional. It is used to define the number of seconds (s) or milliseconds (ms) to wait before the animation will start, that is the amount of time for which the animation will be delayed. The default value is 0. Negative values are allowed. If a negative value is used, the animation will start as if it had already been playing for N seconds/milliseconds.
- initial: This value is used to set the property to its default value.
- inherit: This value is used to inherit the property from its parent element.
Below examples illustrates the use of animation-delay property in CSS.
Example 1: In this example, we use animation property to add the animation effect and also use animation-delay property to add the time delay in animation.
Example 2: In this example, we use the animation-name property to add the animation effect and also use the animation-delay property to add the time delay in animation. We have also used the animation-iteration-count property to add the animation iteration.