Style animationPlayState Property

Pausing an animation:

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

Description

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.

Return the animationPlayState property:

object.style.animationPlayState

Set the animationPlayState property:

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

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

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

animationPlayState is a CSS3 (1999) feature.

It is fully supported in all browsers:


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	11