Animation-play-state - Property CSS

Syntax diagram of animation-play-state.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• If multiple animations are present, as many values can be specified by separating them with commas.

Description of the animation-play-state property.

The property animation-play-state defines the state of an animation: paused or running. It is therefore possible at any time to stop an animation, for example with a Javascript script.

If animation-play-state is set to paused during the wait time of an animation (see animation-delay), this time is increased accordingly. In other words, any remaining wait time at the moment of pausing will be consumed when animation-play-state is set back to running.

For a general overview of animations, see the page on animations in CSS.

Values for animation-play-state.

• animation-play-state: running;

  Default value. The animation is playable if all its necessary parameters are set.

• animation-play-state: paused;

  The animation is paused. It is not playable.

• animation-play-state: running, running, ...;

  A series of values separated by commas. This syntax is useful if multiple animations are defined.
  For more details on multiple animations, see the page on multiple animations.

• animation-play-state: initial; (running) animation-play-state: inherit; animation-play-state: revert; animation-play-state: revertLayer; animation-play-state: unset;

  Links to the presentation of these different values: initial, inherit, revert, revert-layer, unset.

Animation of the animation-play-state property.

The property animation-play-state cannot itself be subject to an animation.

Manipulating the animation-play-state property programmatically.

Change the state of the animation in JavaScript.

The JavaScript code below (two variants) stops the animation by setting the animation-play-state property to paused. Two syntaxes are possible: with the property name written in kebab-case or in camel-case.

let el = document.getElementById('id'); el.style['animation-play-state'] = 'paused'; // or let el = document.getElementById('id'); el.style.animationPlayState = 'paused';

Read the state of animation in Javascript.

The JavaScript code below works when the property has been set on the element itself, in the HTML code, using the style attribute, or with code like the one shown above.

let el = document.getElementById('id'); let value = el.style['animation-play-state']; // or let el = document.getElementById('id'); let value = el.style.animationPlayState;

Read the computed value of animation-play-state in Javascript.

The computed value is the one that has been applied to the element via a CSS selector, or directly through the HTML style attribute. Otherwise, the computed value will be an inherited value or the initial value (running in the case of animation-play-state).

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('animation-play-state');

Modify the value of the property animation-play-state with jQuery.

The code below, in JQuery (2 variants), stops the animation by assigning the value paused to the property animation-play-state.


$('#id').css('animation-play-state', 'paused');
// or
$('#id').css('animationPlayState', 'paused');


Read the value of the property of animation-play-state in JQuery.

let value = $('#id').css('animation-play-state');

Other code examples.

Other examples of Javascript and JQuery code are given on the page Javascript and CSS.

Test it yourself.

The buttons below apply the entered value to the property animation-play-state and then display either the value as it was applied, or the computed value.

Simulator.

Browsers compatibility with animation-play-state.

1

Animation
support

2

animation-play-state
property

Estimated overall support.

97%

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the animation-play-state property.

• CSS Animations Level 1

  This specification introduces changes in property values over time. Animations are similar to transitions, but they do not need an external event to run (JavaScript code, user action, etc.). The different stages of the animation are controlled by an @keyframes at-rule.
  Many parameters can be adjusted when applying an animation: number of repetitions, duration, whether the animation reverses its start and end or not, etc. Each of these parameters corresponds to a property.

  Regarding animation-play-state. Introduction of animations in CSS.
  First definition of the animation-play-state property.
  

  March 20, 2009

  Working Draft.

  

  

  

• CSS Animations Level 2

  This level 2 of the specification mainly introduces scroll-driven animations. These are described in a separate module, but there are necessarily interactions with the animation module. In particular, the animation-timeline property is introduced.
  Another property is added: animation-composition, which defines how animations combine when they are applied to the same element.

  Regarding animation-play-state. No change to the CSS property animation-play-state.
  

  March 02, 2023

  Working Draft.

  

  

  

See also, about animations.

Everything related to animations is described in the specification module CSS Animations published by the W3C. To make your research easier, we list below the keywords related to animations.

Properties:

At-rules: