CSS animation-play-state

The animation-play-state property is used to specify whether an animation is running or paused.

CSS

animation-play-state: value;

Animations in CSS allow you to change the state of an element. While the animation-play-state property is used to specify the playing state of animations, there are other animation properties as well like animation-name,animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction and animation-fill-mode.

See the Pen CSS animation-play-state by Aakhya Singh (@aakhya) on CodePen.

Note: For animations to be effective, it is necessary to define the animation-duration property because the duration of animations is zero by default.

Values

running : Specifies that the animation is running. This is the default value.

paused : Specifies that the animation is paused.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Examples

In the following example, the animation is paused by giving animation-play-state: paused to the div to which it is applied. On again the running the animation by giving animation-play-state: running, it restarts from where it left off before being paused. The prefix -webkit- is used for better browser support.

HTML

<div></div>

CSS

@keyframes move {
  0% {top: 110px; left: 0;}
  20% {top: 0; left: 0;}
  50% {top: 0; left: 200px;}
  70% {top: 110px; left: 200px;}
  100% {top: 110px; left: 0;}
}

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #007399;
  position: relative;
  top: 110px;
  -webkit-animation-name: move;
  animation-name: move;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-iteration-count: infinite; 
  animation-iteration-count: infinite;
  -webkit-animation-play-state: paused; 
  animation-play-state: paused;
}

See the Pen CSS animation-play-state by Aakhya Singh (@aakhya) on CodePen.

Giving different playing states for different animations

If multiple animations are applied to an element, then you can define different playing states for different animations.

If only one value is given to the animation-play-state property, then it decides the playing state of all the animations applied to the specified element. To give them different playing states, give multiple comma separated values to the animation-play-state property corresponding to the respective comma separated animation names given to the animation-name property.

Look at this code.

CSS

animation-name: reshape, colorChange;
animation-play-state: paused, running;

In this code, the values paused and running correspond to the animations named "reshape" and "colorChange" respectively.

Look at this code in effect in the following demo.

HTML

<div></div>

CSS

@keyframes reshape{
  0% { border-radius: 50%; }
  100% { border-radius: 0%; }
}

@keyframes colorChange{
	0% {background-color: yellow;}
	100% {background-color: green;}
}

div {
  width: 150px;
  height: 150px;
  background-color: #8f5656;
  border-radius: 50%;
  -webkit-animation-name: reshape, colorChange;
  animation-name: reshape, colorChange;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite; 
  animation-iteration-count: infinite;
  -webkit-animation-play-state: paused, running;
  animation-play-state: paused, running;
}

See the Pen CSS animation-play-state example by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is supported in all the major browsers.