Style animationPlayState property

Definition and usage

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

Note:Use this property to pause the animation in the middle of the loop.

See also:

CSS Reference Manual:animation-play-state property

Example

Pause animation:

document.getElementById("myDIV").style.animationPlayState = "paused";

Try it yourself

Syntax

Return animationPlayState property:

object.style.animationPlayState

Set animationPlayState property:

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

Property value

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

Technical details

Default value: running
Return value: A string that represents the element's animation-play-state property.
CSS version: CSS3

Browser support

animationPlayState It is a CSS3 (1999) feature.

All browsers fully support it:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Support Support Support Support Support 11