Latest web development tutorials
 

Style animationPlayState Property

< Style Object

Example

Pausing an animation:

// Code for Chrome, Safari, and Opera
document.getElementById("myDIV").style.WebkitAnimationPlayState = "paused";

// Standard syntax
document.getElementById("myDIV").style.animationPlayState = "paused";
Try it Yourself »

Definition and Usage

The animationPlayState property specifies whether the animation is running or paused.

Note: Use this property to pause an animation in the middle of a cycle.


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by Webkit, Moz, or O specify the first version that worked with a prefix.

Property
animationPlayState 43.0
4.0 Webkit
10.0 16.0
5.0 Moz
4.0 Webkit 30.0
15.0 Webkit
12.1
12.0 O

Note: Chrome, Safari and Opera support an alternative, the WebkitAnimation property.


Syntax

Return the animationPlayState property:

object.style.animationPlayState

Set the animationPlayState property:

object.style.animationPlayState="running|paused|initial|inherit"

Property Values

Value Description
running Default value. Specifies that the animation is running
paused Specifies that the animation is paused
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: running
Return Value: A String, representing the animation-play-state property of an element
CSS Version CSS3

Related Pages

CSS reference: animation-play-state property


< Style Object