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 |