🎯 CSS animation-play-state Property

The animation-play-state property determines whether an animation applied to an HTML element is currently playing or paused.

This property gives you dynamic control over the playback timeline, allowing you to easily pause an ongoing animation and resume it later from the exact same frame.

This property accepts two primary state values along with global CSS defaults. Here is how they affect your animations:

This is the default value. The animation plays normally without any interruption. It signifies that the animation timeline is active and moving forward.

.box {
    animation-play-state: running;
}
                

When this value is applied, the animation freezes exactly where it currently is in its timeline. If the state is toggled back to running, the animation seamlessly picks up right where it left off.

.box {
    animation-play-state: paused;
}
                

Resets the property to its default CSS value. Because the default behavior of an animation is to play immediately, it acts exactly like running.

.box {
    animation-play-state: initial;
}
                

The most common real-world use case for this property is pausing an infinite animation when a user hovers their mouse over an element:

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

.spinner {
    animation-name: spin;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-play-state: running; /* Plays by default */
}

/* Pause the animation on hover */
.spinner:hover {
    animation-play-state: paused;
}
                

Gaining control over the animation state helps build highly interactive and user-friendly user interfaces (UI):

• Easily create interactive elements like pause/play buttons for sliders or carousels.
• Improve user experience (UX) by stopping distracting background movements on hover.
• Can be effortlessly toggled via JavaScript to manage complex UI states and game mechanics.
• Saves performance by letting you freeze heavy non-visible animations when necessary.