Property Description
The animation-play-state property specifies whether the animation is running or paused.
This property has the following syntax:
animation-play-state: paused|running|initial|inherit;
Property Values
Value | Description |
---|---|
paused | Specifies that the animation is paused |
running | (default) Specifies that the animation is running |
initial | Specifies that the value of the property should be set to the default value |
inherit | Specifies that the value of the property should be inherited from the parent element |
Examples
This example shows the use of the animation-play-state property
<style type="text/css">
div.animate {
width:50px;
height:50px;
color:white;
padding:2px;
background:blue;
position:relative;
animation:boxmove 5s infinite;
/* Firefox */
-moz-animation:boxmove 5s infinite;
/* Safari and Google Chrome */
-webkit-animation:boxmove 5s infinite;
}
#test1 {
animation-play-state:running;
/* Firefox */
-moz-animation-play-state:running;
/* Safari and Google Chrome */
-webkit-animation-play-state:running;
}
#test2 {
animation-play-state:paused;
/* Firefox */
-moz-animation-play-state:paused;
/* Safari and Google Chrome */
-webkit-animation-play-state:paused;
}
@keyframes boxmove
{
from {left:0px;}
to {left:210px;}
}
@-moz-keyframes boxmove /* Firefox */
{
from {left:0px;}
to {left:210px;}
}
@-webkit-keyframes boxmove /* Safari and Google Chrome */
{
from {left:0px;}
to {left:210px;}
}
</style>
<div id="test1" class="animate">running</div>
<br />
<div id="test2" class="animate">paused</div>
This produces the following result:
running
paused
Browser Support
Chrome | Firefox | IE | Safari | Opera |
---|---|---|---|---|
4.0 -webkit- | 16.0 5.0 -moz- |
10.0 | 4.0 -webkit- | 12.1 12.0 -o- 15.0 -webkit- |
Miscellaneous Information
Inherited: | No |
---|---|
Defined In: | CSS3 |
Default Value: | running |