CSS animation-play-state Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The animation-play-state property in CSS is used to control whether a CSS animation is running or paused at any given moment. Unlike defining the animation itself with properties such as animation-name or animation-duration, animation-play-state does not alter the way an animation behaves over time - it simply toggles its execution. This can be particularly useful for user interactions, such as pausing an animation when a user hovers over an element or when a page loses focus, without needing to remove or redefine the animation entirely.

One common use of animation-play-state is in conjunction with pseudo-classes like :hover or :focus, allowing developers to create interactive experiences. For example, a spinning loader or a bouncing icon can pause when a user hovers over it, giving them more control and improving usability. It also works seamlessly with animation-iteration-count, so animations that repeat a specific number of times can be paused mid-cycle and resumed exactly where they left off. This makes animation-play-state a valuable tool for fine-tuning animations without impacting other animation properties.

Additionally, animation-play-state can be leveraged in more complex scenarios involving multiple animations or dynamically triggered sequences. When paired with animation-delay, you can create staggered or conditional effects, pausing and resuming animations based on events or conditions in your JavaScript or CSS. Its simplicity in toggling between 'running' and 'paused' makes it an efficient way to manage animation flow without needing to manipulate keyframes or other core animation definitions, providing both control and flexibility in crafting sophisticated, responsive designs.

Definition

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

<single-animation-play-state> = running | paused

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

Example

HTML

<div class="wrap">

    <input type="checkbox" id="pause">

    <label for="pause" class="toggle" aria-pressed="false"></label>

    <div class="box" aria-hidden="true"></div>

</div>

CSS

/* Simple demo of animation-play-state using a checkbox toggle */
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f4f8;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
.wrap {
    text-align: center;
}
/* hide the native checkbox */
input#pause {
    display: none;
}
/* styled label acts as the toggle button */
.toggle {
    display: inline-block;
    margin-bottom: 18px;
    padding: 10px 18px;
    background: #0366d6;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(2,6,23,0.12);
}
/* change the label text based on checkbox state */
.toggle::after {
    content: "Pause";
}
input#pause:checked + .toggle::after {
    content: "Play";
}
/* the animated element */
.box {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 14px;
    background: linear-gradient(135deg, #2dd4bf, #06b6d4);
    box-shadow: 0 12px 30px rgba(2,6,23,0.12);

    /* animation settings */
    animation: spin 1.8s linear infinite;
    animation-play-state: running; /* default state */
}
/* when the checkbox is checked, pause the animation */
input#pause:checked + .toggle + .box {
    animation-play-state: paused;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS animation-play-state property. Hover over a browser icon to see the version that first introduced support for this CSS property.