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
Media: Visual
Computed value: As specified
Animatable: No
CSS Version: CSS3
JavaScript syntax: object.style.animationPlayState

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

HTML

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

CSS

.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;  
   } 
 }

Result