/* Single animation */ animation-play-state: running; animation-play-state: paused;  /* Multiple animations */ animation-play-state: paused, running, running;  /* Global values */ animation-play-state: inherit; animation-play-state: initial; animation-play-state: revert; animation-play-state: unset; 

animation-play-state

The animation-play-state CSS property sets whether an animation is running or paused.

Resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence.

Syntax

/* Single animation */ animation-play-state: running; animation-play-state: paused;  /* Multiple animations */ animation-play-state: paused, running, running;  /* Global values */ animation-play-state: inherit; animation-play-state: initial; animation-play-state: revert; animation-play-state: unset; 

Values

The animation is currently playing.

The animation is currently paused.

Note: When you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. For more information, see Setting multiple animation property values.

Formal definition

Formal syntax

<single-animation-play-state>#
where <single-animation-play-state> = running | paused

Examples

The animation is paused

<div class="box"></div> 

.box {   background-color: rebeccapurple;   border-radius: 10px;   width: 100px;   height: 100px;   animation-name: rotate;   animation-duration: 0.7s;   animation-play-state: paused; }  @keyframes rotate {   0% {     transform: rotate(0);   }   100% {     transform: rotate(360deg);   } } 

See CSS animations for examples.

Specifications

See also