The animation-play-state sets the animation play state.
Possible values include paused and running.
The default is running.
An element with animation-play-state set to running.
<style>
.animate {
width: 80px;
height: 80px;
background: steelblue;
animation: movingAnimation 2s alternate;
animation-iteration-count: infinite;
animation-play-state: running;
}
@keyframes movingAnimation {
from { transform: none; }
to { transform: translateX(350%); }
}
</style>
<div class="animate"></div>
animation-play-state: paused | running |
initial | inherit;
| Value | Description |
|---|---|
| paused | Pause the animation at start |
| running | Default. Plays the animation at start |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different animation-play-state values.
<style>
.animate-example {
width: 80px;
height: 80px;
background: steelblue;
animation: movingAnimation 2s;
animation-iteration-count: infinite;
animation-play-state: paused;
}
@keyframes movingAnimation {
from { transform: none; }
to { transform: translateX(350%); }
}
</style>
<div class="animate-example"></div>
This table shows when animation-play-state support started for each browser.
 Chrome
|
43.0 | May 2015 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
30.0 | Jun 2015 |
 Safari
|
9.0 | Sep 2015 |
