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.
Official Syntax
Values
- running
-
While the
animation-play-state
is set to running, the animation proceeds as normal. - paused
-
While the
animation-play-state
is set to paused, the animation is paused. The animation continues to apply to the element with the progress it had made before being 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.
Examples
The following pauses an animation of an element to paused while another animation is running:
.element { animation-name: bounce, shake; animation-duration: 2s, 3s; animation-iteration-count: infinite, infinite; animation-play-state: running, paused; }
Live Demo
Click on the button in the following demo to toggle the “paused” play state of the animation.
View this demo on the Codrops PlaygroundBrowser Support
CSS Animation
Complex method of animating certain properties of an element
W3C Working Draft
Supported from the following versions:
Desktop
- 43
- 16
- 10
- 12
- 9
Mobile / Tablet
- 9.0
- 129
- No
- 129
- 130