animation-play-state
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Theanimation-play-stateCSS 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.
Try it
animation-play-state: paused;animation-play-state: running;<section> <div></div></section>#example-element { background-color: #1766aa; color: white; margin: auto; margin-left: 0; border: 5px solid #333333; width: 150px; height: 150px; border-radius: 50%;}.animating { animation-name: slide; animation-duration: 3s; animation-timing-function: ease-in; animation-iteration-count: infinite; animation-direction: alternate;}@keyframes slide { from { background-color: orange; color: black; margin-left: 0; } to { background-color: orange; color: black; margin-left: 80%; }}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: revert-layer;animation-play-state: unset;Values
Note:When you specify multiple comma-separated values on ananimation-* property, they are applied to the animations in the order in which theanimation-names appear. For situations where the number of animations andanimation-* property values do not match, seeSetting multiple animation property values.
Formal definition
| Initial value | running |
|---|---|
| Applies to | all elements,::before and::afterpseudo-elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |
Formal syntax
animation-play-state =
<single-animation-play-state>#
<single-animation-play-state> =
running|
paused
Examples
Pausing an animation
This animation is paused, but runs when you hover over it.
HTML
<div></div>CSS
.box { background-color: rebeccapurple; border-radius: 10px; width: 100px; height: 100px; animation-name: rotate; animation-duration: 0.7s; animation-iteration-count: infinite; animation-play-state: paused;}.box:hover { animation-play-state: running;}@keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); }}Result
Hover over the rectangle to play the animation.
SeeCSS animations for examples.
Specifications
| Specification |
|---|
| CSS Animations Level 1 # animation-play-state |
Browser compatibility
See also
- Using CSS animations
- JavaScript
AnimationEventAPI - Other related animation properties:
animation,animation-composition,animation-delay,animation-direction,animation-duration,animation-fill-mode,animation-iteration-count,animation-name,animation-timeline,animation-timing-function