CSS animation-play-state Property

Description

The animation-play-state property defines whether the animation is running or paused. A running animation can be paused by setting this property to 'paused'. To continue running a paused animation this property can be set to 'running'. A paused animation will continue to display the current value of the animation in a static state, as if the time of the animation is constant. When a paused animation is resumed, it restarts from the current value, not necessarily from the beginning of the animation.

Initial value

running

Applies to

All elements, :before and :after pseudo elements

Inherited

No

Computed value

As specified

Animatable

No

JavaScript syntax

object.style.animationPlayState

Interactive Demo

animation-play-state: running;

animation-play-state: paused;

Syntax

animation-play-state: <single-animation-play-state> [ ',' <single-animation-play-state> ]*

Values

• runningThe animation is currently playing.
• pausedThe animation is currently paused.

Example

<div class="test">Hover over me!</div>

.test {
   width: 100px; 
   height: 100px; 
   color: white;
   background: green;
   position: relative;
   animation-name: iliketomoveit; 
   animation-duration: 5s; 
   animation-iteration-count: infinite; 
   animation-play-state: running;
} 
.test:hover {
   animation-play-state: paused; 
} 
 @keyframes iliketomoveit {
   0% { 
      left: 0px;  
   } 
   25% { 
      left: 400px;  
   } 
   75% { 
      left: 200px;  
   } 
   100% { 
      left: 0px;  
   } 
 } 

Browser Support

The following table will show you the current browser support for the CSS animation-play-state property.

Desktop
12	43	16	30	9

Tablets / Mobile
43	16	30	9	4	43

Last updated by CSSPortal on: 31st December 2023