animation-play-state

The animation-play-state property specifies whether a CSS animation is running or paused.

When an animation is paused, the animation continues to apply to the element with the progress it had made before being paused. This means that whatever values the animation has reached will still be applied to the element while the animation is paused. When unpaused (set back to running), it restarts from where it left off, as if the “clock” that controls the animation had stopped and started again.

You can specify one or multiple comma-separated animation-play-state values. When you provide a list of comma-separated values, this list is usually mapped to a list of values provided by other animation-related properties, such as the animation-delay, animation-timing-function, and animation-name properties, among others. Each list of values in these properties is treated kind of like an array, where each value in a list of values has its own index. Then, each value in a list of values is mapped to its corresponding value with the same index in the list provided in the other properties.

For example, if you provide two animation-play-state values, then the first value determines the play state of the animation of the first animation in the list of animation names provided by animation-name, and the second play state specifies the play state of the second animation.

Trivia & Notes

The animation play state of an animation may be set dynamically using JavaScript depending on certain user interactions with the element or the page. See the live demo section below for an example.