animation-play-state
The animation-play-state
CSS property sets whether an animation is running or paused.
Resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence.
Syntax
/* Single animation */
animation-play-state: running;
animation-play-state: paused;
/* Multiple animations */
animation-play-state: paused, running, running;
/* Global values */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: revert;
animation-play-state: unset;
Values
running
-
The animation is currently playing.
paused
-
The animation is currently paused.
Note: When you specify multiple comma-separated values on an animation-*
property, they will be assigned to the animations specified in the animation-name
property in different ways depending on how many there are. For more information, see Setting multiple animation property values.
Formal definition
Initial value | running |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
<single-animation-play-state>#where
<single-animation-play-state> = running | paused
Examples
The animation is paused
HTML
<div class="box"></div>
CSS
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation-name: rotate;
animation-duration: 0.7s;
animation-play-state: paused;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Result
See CSS animations for examples.
Specifications
Specification |
---|
CSS Animations Level 2 # animation-play-state |
Browser compatibility
BCD tables only load in the browser
See also
- Using CSS animations
- JavaScript
AnimationEvent
API