The animation-play-state property may specify when or if to pause an animation, freezing the element in its current state, and when to continue. 


selector { 

    animation-play-state: paused | running | initial | inherit;



The animation-play-state property accepts the following values: 

  • running; This is the default state. The animation runs normally and if it’s been paused, it resumes from the current point of the cycle.
  • paused; The animation stops running and the element(s) continue to display in the state they were in when the animation was being paused.
  • initialinherit
NOTE: You will always need some sort of a trigger to pause an animation. One of the simplest triggers is the :hover pseudo-class.


The animation-play-state property example:


›› go to examples ››