CSS3 animation-play-state Property

Example

Pause an animation:

animation-play-state: paused;
-webkit-animation-play-state: paused; /*Safari and Chrome*/

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The animation-play-state property is not supported in any browsers.

Safari and Chrome support an alternative, the -webkit-animation-play-state property.


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
Version: CSS3
JavaScript syntax: object.style.animationPlayState="paused"


Syntax

animation-play-state: paused|running;

Value Description
paused Specifies that the animation is paused
running Specifies that the animation is running