CSS - animation-play-state Property

Quiz

CSS animation-play-state property is used to specify wheather the animation is running or not. You can use this property with JavaScript onclick() function to trigger the property to change the state.

Syntax

animation-play-state: running | paused| inital| inherit

Property Values

Value	Description
paused	This specifies that the animation is paused.
running	This specifies that the animation is playing. This is the default value
initial	This sets the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of Animation Play State Property

Below are explained some examples of animation-play-state property.

Running State Animation

In order to make the animation play, we give the running value to the animation-play-state property.

In the example below, the animation-play-state has been set to running, so the ball keeps on changing its size.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 250px;
            margin: 0;
            background-color: #f0f0f0;
        }

        .circle-demo {
            width: 100px;
            height: 100px;
            background-color: #ff6347;
            border-radius: 50%;
            animation-name: pulse;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-play-state: running;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.8);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>
    <div class="circle-demo"></div>
</body>

</html>

Paused State Animation

In order to not let the animation play, we give the paused value to the animation-play-state property

In the example below, the animation-play-state has been set to paused and so there is no movement of the ball.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            margin: 0;
            background-color: #f0f0f0;
        }

        .circle-demo {
            width: 100px;
            height: 100px;
            background-color: #ff6347;
            border-radius: 50%;
            animation-name: pulse;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-play-state: paused;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.8);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>
    <div class="circle-demo"></div>
</body>

</html>

Animation on Hover

One can creatively use a combination of these values to create interactive UI

In the following example,both values running and paused have been used. On hovering on the ball, the running state is set. Away from the ball, the paused state is set.

Example

<!DOCTYPE html>
<html>

<head>

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 250px;
            margin: 0;
            background-color: #f0f0f0;
        }

        .circle-demo {
            width: 100px;
            height: 100px;
            background-color: #ff6347;
            border-radius: 50%;
            animation-name: pulse;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-play-state: paused;
        }

        .circle-demo:hover {
            animation-play-state: running;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.8);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>
    <div class="circle-demo"></div>
</body>

</html>

Supported Browsers

Property
animation-play-state	43.0	10.0	16.0	9.0	30.0

Print Page