CSS animation-play-state Property

The animation-play-state property is used to specify whether the animation is running or paused.

Syntax:

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

Property Value: The animation-play-state property are listed below:

paused: This property is used to specify that the animation is paused.
running: It is the default value. This property is used to specify that the animation is running.
initial: This property is used to set its default value.
inherit: It is used to inherit the animation property from its parent.

Example: In this example, we are using the above-explained property.

html

<!DOCTYPE html>
<html>
   
<head>
    <title>
        CSS | animation-play-state Property
    </title>
    <style>
        body {
            text-align: center;
            width: 70%;
        }
 
        h1 {
            color: green;
        }
 
        .gfg {
            width: 50px;
            height: 50px;
            background: green;
            position: relative;
            -webkit-animation: mymove 10s;
            -webkit-animation-play-state: play;
            animation: mymove 5s;
            animation-play-state: play;
        }
 
        .geeks {
            width: 50px;
            height: 50px;
            background: green;
            position: relative;
            -webkit-animation: mymove 10s;
            -webkit-animation-play-state: paused;
            animation: mymove 5s;
            animation-play-state: paused;
        }
 
        @-webkit-keyframes mymove {
            from {
                left: 0%;
            }
 
            to {
                left: 80%;
            }
        }
 
        @keyframes mymove {
            from {
                left: 0%;
            }
 
            to {
                left: 80%;
            }
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>animation-play-state property</h2>
    <div class="gfg"></div><br>
    <div class="geeks"></div>
</body>
   
</html>