CSS3 animation-play-state Property


Example

Pause an animation:

div {
    -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
}

Try it yourself »

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


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


CSS Syntax

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

Property Values

Value Description Play it
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


Related Pages

CSS3 tutorial: CSS3 Animations

HTML DOM reference: animationPlayState property



Color Picker

colorpicker