CSS3 animation-play-state property
May 05, 2021 CSS Reference Manual
Table of contents
CSS reference manual
Definitions and usages
animation-play-state:
Set whether to run or pause the animation.
Note: You can use this property in JavaScript so that you can pause the animation while it's playing.
| Default: | running |
|---|---|
| Inheritance: | no |
| Version: | CSS3 |
| JavaScript syntax: | object.style.animationPlayState="paused" |
Grammar
animation-play-state: paused|running;
| Value | Describe | Test |
|---|---|---|
| paused | The animation has been paused. | Test |
| running | Default, the animation is running. | Test |
Pause animation:
{
animation-play-state:paused;
-webkit-animation-play-state:paused; / * Safari and Chrome * /
}
Try it out . . .
Browser support
| Attributes | |||||
|---|---|---|---|---|---|
| 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- |
Internet Explorer 10, Firefox, and Opera support the animation-play-state property.
Safari and Chrome support alternative -webkit-animation-play-state properties.
Note: The animation-play-state property is not supported by Internet Explorer 9 and earlier versions.
Related pages
CSS3 tutorial: CSS3 animation