W3cubDocs

/CSS

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: 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);
  }
}

See CSS animations for examples.

Specifications

Specification Status Comment
CSS Animations
The definition of 'animation-play-state' in that specification.
Working Draft Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
animation-play-state 43
43
3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12
12
12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
16
16
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
5
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
10 30
30
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12.1 — 15
12 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
9
9
4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
animation-play-state 43
43
≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
43
43
18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
16
16
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
5
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
30
30
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12.1 — 14
12 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
9
9
2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
4.0
4.0
1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state