rick@tillitsdone.com

+66824564755

Scroll to discover

CSS animation-play-state Control Animation Playback

Learn about the CSS animation-play-state property.

Control whether animations are running or paused.

Available options include 'running' and 'paused'.

CSS `animation-play-state` Property

The animation-play-state property in CSS allows you to control whether an animation is running or paused. This is useful for creating interactive elements that respond to user actions, such as hovering over an element or clicking a button.

Description

The animation-play-state property in CSS is used to specify whether an animation is currently running or paused. This property can be applied to single or multiple animations, allowing you to control each animation’s playback state individually.

Syntax

Here’s how to use the animation-play-state property in your CSS code:

/* Single animation */
animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */
animation-play-state: paused, running, running;

/* Global values */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: revert;
animation-play-state: revert-layer;
animation-play-state: unset;

running: The animation is currently playing.
paused: The animation is currently paused.
inherit, initial, revert, revert-layer, and unset are global values that control inheritance and reset behaviors.

Values

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

running: The animation is currently playing.
paused: The animation is currently paused.
inherit: Inherits the playback state from the parent element.
initial: Sets the playback state to its default value (running).
revert: Reverts the playback state to the value specified by the user agent or user stylesheet.
revert-layer: Reverts the playback state considering the cascade layer.
unset: Resets the playback state to its natural value.

Formal Definition

Here’s the formal definition of the animation-play-state property:

Initial value	`running`
Applies to	All elements, `::before` and `::after` pseudo-elements
Inherited	No
Computed value	As specified
Animation type	Not animatable

The property syntax is:

animation-play-state = <single-animation-play-state>
                     | <single-animation-play-state>, <single-animation-play-state> /* One or more */

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

Examples

Pausing and Running an Animation on Hover

In this example, we create an animation that is paused initially and starts running when the user hovers over the element.

HTML

<div class="box"></div>

CSS

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

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

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Result

Hover over the rectangle to play the animation.

Running Animation Continuously

In this example, we create a running animation that moves a green square across the screen continuously from left to right.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Running Animation</title>
    <style>
        .running {
            width: 50px;
            height: 50px;
            background: green;
            position: relative;
            animation: mymove 5s linear infinite;
            animation-play-state: running;
        }

        @keyframes mymove {
            from {
                left: 0%;
            }

            to {
                left: 80%;
            }
        }
    </style>
</head>
<body>
    <h2>Running Animation</h2>
    <div class="running"></div>
</body>
</html>

Output

The green square will continuously move from left to right across the screen.

Paused Animation

In this example, we create a paused animation that halts the movement of a green square across the screen.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Paused Animation</title>
    <style>
        .paused {
            width: 50px;
            height: 50px;
            background: green;
            position: relative;
            animation: mymove 5s linear infinite;
            animation-play-state: paused;
        }

        @keyframes mymove {
            from {
                left: 0%;
            }

            to {
                left: 80%;
            }
        }
    </style>
</head>
<body>
    <h2>Paused Animation</h2>
    <div class="paused"></div>
</body>
</html>

Output

The green square will remain stationary, demonstrating a paused animation.

Supported Browsers

The animation-play-state property works in many modern browsers:

Google Chrome: Since version 5.0.
Microsoft Edge: Since version 12.
Mozilla Firefox: Since version 4.0.
Safari: Since version 5.0.
Opera: Since version 11.1.

FAQs

What is the `animation-play-state` property in CSS?

The animation-play-state property controls whether an animation is running or paused. It helps you pause and resume animations.

Does `animation-play-state` affect animations on page load?

If you set animation-play-state: paused, the animation won’t start when the page loads. It stays paused until set to running.

What is the default value of `animation-play-state`?

The default value is running, so the animation starts immediately.

Does `animation-play-state` affect completed animations?

No, once an animation is complete, setting animation-play-state: running won’t restart it. You need to re-trigger the animation.

Can I control the `animation-play-state` with JavaScript?

Yes, you can use JavaScript to control the animation state dynamically.

Browser Compatibility

The animation-play-state property is widely supported:

Google Chrome: Since version 5.0.
Microsoft Edge: Since version 12.
Mozilla Firefox: Since version 4.0.
Safari: Since version 5.0.
Opera: Since version 11.1.

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms

CSS animation-play-state Control Animation Playback

CSS animation-play-state Property

Description

Syntax

Values

Formal Definition

Examples

Pausing and Running an Animation on Hover

HTML

CSS

Result

Running Animation Continuously

HTML

Output

Paused Animation

HTML

Output

Supported Browsers

FAQs

What is the animation-play-state property in CSS?

Does animation-play-state affect animations on page load?

What is the default value of animation-play-state?

Does animation-play-state affect completed animations?

Can I control the animation-play-state with JavaScript?

Browser Compatibility

See Also

Talk with CEO

CSS `animation-play-state` Property

What is the `animation-play-state` property in CSS?

Does `animation-play-state` affect animations on page load?

What is the default value of `animation-play-state`?

Does `animation-play-state` affect completed animations?

Can I control the `animation-play-state` with JavaScript?