CSS animation-play-state Property

The animation-play-state property in CSS controls animation playback: paused stops, running starts, initial resets to default, and inherit inherits from its parent element.

Syntax

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

Property Value

The animation-play-state property is listed below:

Value	Description
paused	Specifies that the animation is paused.
running	The default value specifies that the animation is running.
initial	Sets the animation property to its default value.
inherit	Inherits the animation property from its parent element.

Example: Running Animation

In this example we demonstrate a running animation using the animation-play-state property, causing a green square to move across the screen continuously from left to right.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS animation-play-state Property - Running Animation</title>
    <style>
        body {
            text-align: center;
            width: 70%;
        }

        h1 {
            color: green;
        }

        .running {
            width: 50px;
            height: 50px;
            background: green;
            position: relative;
            -webkit-animation: mymove 5s linear infinite;
            /* Webkit prefix */
            animation: mymove 5s linear infinite;
            animation-play-state: running;
            /* Animation is running */
        }

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

            to {
                left: 80%;
            }
        }
    </style>
</head>

<body>
    <h2>animation-play-state property - Running Animation</h2>
    <div class="running"></div>
</body>

</html>

Output:

Animation-running — CSS animation-play-state Property - Running Animation Example Output

Example: Paused Animation

In this example, we demonstrates a paused animation using the animation-play-state property, halting the green square's movement across the screen.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>
      CSS animation-play-state Property - Paused Animation
    </title>
    <style>
        .paused {
            width: 50px;
            height: 50px;
            background: green;
            position: relative;
            -webkit-animation: mymove 5s linear infinite;
            /* Webkit prefix */
            animation: mymove 5s linear infinite;
            animation-play-state: paused;
            /* Animation is paused */
        }

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

            to {
                left: 80%;
            }
        }
    </style>
</head>

<body>
    <h2>
      animation-play-state property - Paused Animation
    </h2>
    <div class="paused"></div>
</body>

</html>