CSS animation-play-state Property

Pause an animation:

div {
animation-play-state: paused;
}

More "Try it Yourself" examples below.

Definition and Usage

The animation-play-state property specifies whether the animation is running or paused.

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

Default value:	running
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.animationPlayState="paused" Try it

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
animation-play-state	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

animation-play-state: paused|running|initial|inherit;

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

Pause an animation on hover:

div:hover {
animation-play-state: paused;
}