animation-play-state property specifies whether a CSS animation is running or paused. This can be used to determine whether or not an animation is currently running. Moreover, this property can be used to pause and resume playback of an animation.
Resuming a paused animation will start the animation from where it left off when it was paused, rather than starting over from the beginning of the animation sequence. While the animation is paused, the style rules that were computed at the instant the animation was paused are still applied to the element.
The initial value of
animation-play-state property is
running. You can apply this property to all elements as well as
::after pseudo-elements. This property is not inheritable.
This is the formal syntax for using
animation-play-state property —
animation-play-state: running | paused
Here are some examples of using this property —
/* Single animation */ animation-play-state: running; animation-play-state: paused; /* Multiple animations */ animation-play-state: paused, running;
This is the default value of
animation-play-state property. In this case, the animation keeps playing normally.
This value pauses the animation applied to the element. When the animation is finally resumed again, it starts from the same point where it was paused.
In the following example, you can stop the circle by hovering over it because its
animation-play-state value will be set to
paused on hover.
animation-play-state property is fully supported in 93.99% browsers.
This property is partially supported in Android 3+ and fully supported in IE 10+, Edge 12+, Firefox 16+, Chrome 43+, Safari 9+, Opera 30+, iOS Safari 9.0-9.2+, Android 53+ and Chrome for Android 55+.
The browser stats were taken from caniuse.com
2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.