Style animationPlayState Property

Style Object Reference 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 4.0 Webkit 10.0 16.0
5.0 Moz
4.0 Webkit 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 Reference Style Object

Color Picker

colorpicker