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

Click here to run the example of animation-play-state property.

CSS animation-play-state Property Definition and Usage

CSS provided a property named `animation-play-state` by which we can control whether to stop an animation that is playing or let it play.

Note: this property is mostly used within JavaScript codes.

CSS animation-play-state Property Syntax

animation-play-state: paused|running|initial|inherit;

CSS animation-play-state Property Value

The values set for this property are:

• running: this is the default value and when used, the target animation will play.
• paused: using this value, we can stop an element from playing. It actually stops the animation right where it is and the next time we hit the animation to play, it will start its progress right where it was.

Note: the two global values, “initial” and “inherit” can also be used for this property.

Example: animation-play-state property in CSS

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

How Does CSS animation-play-state Property Work?

The `animationPlayState` method is the JavaScript version of the CSS `animation-play-state` property and, as you can see, we used this method in order to stop and start the animation when necessary.

Note: you can learn more about JavaScript in JavaScript tutorial section.