In this section, we will learn what the animation-duration property is and how to use it in CSS.

Click here to run the example of animation-duration property.

CSS animation-duration Property Definition and Usage

When we apply an animation to an element, the most important step that should be taken care of is to set the time length of that animation. Without it, there will be no animation at all.

Note: we are talking about those animations that are created by @keyframes at rule.

We set this time length for the animation using the CSS `animation-duration` property.

CSS animation-duration Property Syntax

animation-duration: time|initial|inherit;

CSS animation-duration Property Value

The value we set for this property is a number that declares the duration of the target animation 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-duration property in CSS

See the Pen animation-duration property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: CSS animation-duration property millisecond value

See the Pen CSS animation-duration property millisecond value by Enjoy Tutorials (@enjoytutorials) on CodePen.