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

Syntax

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

Values

<single-animation-play-state> = running | paused
  • 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
Edge Chrome Firefox Opera Safari
124316309
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
4316309443

Last updated by CSSPortal on: 31st December 2023