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:

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