CSS Reference Property

animation-play-state

The animation-play-state property specifies whether a CSS animation is running or paused.

When an animation is paused, the animation continues to apply to the element with the progress it had made before being paused. This means that whatever values the animation has reached will still be applied to the element while the animation is paused. When unpaused (set back to running), it restarts from where it left off, as if the “clock” that controls the animation had stopped and started again.

You can specify one or multiple comma-separated animation-play-state values. When you provide a list of comma-separated values, this list is usually mapped to a list of values provided by other animation-related properties, such as the animation-delay, animation-timing-function, and animation-name properties, among others. Each list of values in these properties is treated kind of like an array, where each value in a list of values has its own index. Then, each value in a list of values is mapped to its corresponding value with the same index in the list provided in the other properties.

For example, if you provide two animation-play-state values, then the first value determines the play state of the animation of the first animation in the list of animation names provided by animation-name, and the second play state specifies the play state of the second animation.

Trivia & Notes

The animation play state of an animation may be set dynamically using JavaScript depending on certain user interactions with the element or the page. See the live demo section below for an example.

Official Syntax

  • Syntax:

    animation-play-state: running | paused
  • Initial: running
  • Applies To: all elements; and ::before and ::after pseudo-elements
  • Animatable: no

Values

running
While the animation-play-state is set to running, the animation proceeds as normal.
paused
While the animation-play-state is set to paused, the animation is paused. The animation continues to apply to the element with the progress it had made before being paused. When unpaused (set back to running), it restarts from where it left off, as if the “clock” that controls the animation had stopped and started again.

Examples

The following pauses an animation of an element to paused while another animation is running:

.element {
    animation-name: bounce, shake;
    animation-duration: 2s, 3s;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, paused;
}
                

Live Demo

Click on the button in the following demo to toggle the “paused” play state of the animation.

View this demo on the Codrops Playground

Browser Support

CSS Animation

Complex method of animating certain properties of an element

W3C Working Draft

Supported from the following versions:

Desktop

  • 43
  • 16
  • 10
  • 12
  • 9

Mobile / Tablet

  • 9.0
  • 56
  • No
  • 59
  • 55

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 10:09 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.