W3cubDocs

animation-play-state

The animation-play-state CSS property sets whether an animation is running or paused.

Try it

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: revert-layer;
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 are applied to the animations in the order in which the animation-names appear. For situations where the number of animations and animation-* property values do not match, 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	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 class="box"></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.

See CSS animations for examples.

Specifications

Specification
CSS Animations Level 1 # animation-play-state

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`animation-play-state`	433	1212	49165	10	301512.1–1512–15	94	43≤37	4318	49165	301412.1–1412–14	92	4.01.0