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

animation-delay: time|initial|inherit;

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.