In this section, we will learn what the animation-delay property is and how to use it in CSS.
Click here to run the example of animation-delay property.
CSS animation-delay Property Definition and Usage
For any particular reason, sometimes we want to delay the start of an animation.
For this reason, CSS provided a property named `animation-delay` by which we can put a delay on those types of animations that are created using “@keyframes rule”.
CSS animation-delay Property Syntax
CSS animation-delay Property Value
The value we set for this property is a number declares the amount of delay based on seconds or milliseconds:
- ms: stands for millisecond and using this unit we can set a value for this property based on millisecond.
- s: stands for second and using this unit we can set a value for this property based on second.
Note: the two global values “initial” and “inherit” could also be used for this property.
Example: animation-delay property in CSS
See the Pen animation-delay property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
Example: CSS animation-delay millisecond
See the Pen CSS animation-delay millisecond by Enjoy Tutorials (@enjoytutorials) on CodePen.