Web/API/Animation/playState

This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.

The Animation.playState property of the Web Animations API returns and sets an enumerated value describing the playback state of an animation.

This property is read-only for CSS Animations and Transitions.

Syntax

var currentPlayState = Animation.playState;

Animation.playState = newState;

Value

idle: The current time of the animation is unresolved and there are no pending tasks.
running: The animation is running.
paused: The animation was suspended and the Animation.currentTime property is not updating.
finished: The animation has reached one of its boundaries and the Animation.currentTime property is not updating.

Previously, Web Animations defined a pending value to indicate that some asynchronous operation such as initiating playback was yet to complete. This is now indicated by the separate Animation.pending property.

Example

In the Growing/Shrinking Alice Game example, players can get an ending with Alice crying into a pool of tears. In the game, for performance reasons, the tears should only be animating when they're visible. So they must be paused as soon as they are animated like so:

// Setting up the tear animations

tears.forEach(function(el) {  
  el.animate(
    tearsFalling, 
    {
      delay: getRandomMsRange(-1000, 1000), // randomized for each tear
      duration: getRandomMsRange(2000, 6000), // randomized for each tear
      iterations: Infinity,
      easing: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)'
    });
  el.pause();
});


// Play the tears falling when the ending needs to be shown. 

tears.forEach(function(el) { 
  el.play();
});


// Reset the crying tears animations and pause them.

tears.forEach(function(el) {  
  el.pause();
  el.currentTime = 0;
});

Specifications

Specification	Status	Comment
Web AnimationsThe definition of 'playState' in that specification.	Working Draft	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`playState` Experimental'	Chrome Full support 39 Notes' Full support 39 Notes' Notes' Before Chrome 50/Opera 37, this property returned `idle` for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows `paused`.	Edge Full support 79	Firefox Full support 48 Notes' Full support 48 Notes' Notes' Prior to Firefox 59, this property returned `pending` for Animations with incomplete asynchronous operations but as of Firefox 59 this is indicated by the separate `Animation.pending` property. This reflects recent changes to the specification. No support 46 — 48 Disabled' Disabled' From version 46 until version 48 (exclusive): this feature is behind the `dom.animations-api.core.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 26 Notes' Full support 26 Notes' Notes' Before Chrome 50/Opera 37, this property returned `idle` for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows `paused`.	Safari No support No	WebView Android Full support 39 Notes' Full support 39 Notes' Notes' Before Chrome 50/Opera 37, this property returned `idle` for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows `paused`.	Chrome Android Full support 39 Notes' Full support 39 Notes' Notes' Before Chrome 50/Opera 37, this property returned `idle` for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows `paused`.	Firefox Android Full support 48 Notes' Full support 48 Notes' Notes' Prior to Firefox 59, this property returned `pending` for Animations with incomplete asynchronous operations but as of Firefox 59 this is indicated by the separate `Animation.pending` property. This reflects recent changes to the specification. No support 46 — 48 Disabled' Disabled' From version 46 until version 48 (exclusive): this feature is behind the `dom.animations-api.core.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Full support 26 Notes' Full support 26 Notes' Notes' Before Chrome 50/Opera 37, this property returned `idle` for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows `paused`.	Safari iOS No support No	Samsung Internet Android Full support 4.0 Notes' Full support 4.0 Notes' Notes' Before Samsung Internet 5.0/Opera 37, this property returned `idle` for an animation that had not yet started. Starting with Samsung Internet 5.0/Opera 37, it shows `paused`.

Legend

Full support: Full support
No support: No support
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.