CSS animation-play-state Property

The 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 ::before and ::after pseudo-elements. This property is not inheritable.

Syntax

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;  

Acceptable Values

running

This is the default value of animation-play-state property. In this case, the animation keeps playing normally.

paused

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.

Examples

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.

See the Pen CSS animation-play-state Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS 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

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

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.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top