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 syntax

<single-animation-play-state>#where 
<single-animation-play-state> = running | paused

Initial value	`running`
Applies to	all elements, `::before` and `::after` pseudo-elements
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

Examples

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
Basic support	43 43 Yes Prefixed Prefixed Requires the vendor prefix: -webkit-	12 12 12 Prefixed Prefixed Requires the vendor prefix: -webkit-	16 16 49 Prefixed Prefixed Requires the vendor prefix: -webkit- 44 Prefixed Disabled Prefixed Requires 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 Requires the vendor prefix: -moz-	10	30 30 15 Prefixed Prefixed Requires the vendor prefix: -webkit- 12.1 — 15 12 — 15 Prefixed Prefixed Requires the vendor prefix: -o-	Yes Yes Yes Prefixed Prefixed Requires the vendor prefix: -webkit-

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	43 43 Yes Prefixed Prefixed Requires the vendor prefix: -webkit-	43 43 Yes Prefixed Prefixed Requires the vendor prefix: -webkit-	Yes Yes Yes Prefixed Prefixed Requires the vendor prefix: -webkit-	16 16 49 Prefixed Prefixed Requires the vendor prefix: -webkit- 44 Prefixed Disabled Prefixed Requires 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 Requires the vendor prefix: -moz-	30 30 15 Prefixed Prefixed Requires the vendor prefix: -webkit- 12.1 — 14 12 — 14 Prefixed Prefixed Requires the vendor prefix: -o-	Yes Yes Yes Prefixed Prefixed Requires the vendor prefix: -webkit-	4.0 4.0 Yes Prefixed Prefixed Requires the vendor prefix: -webkit-