HTML | DOM Style animationPlayState Property

The HTML DOM Style animationPlayState Property is used to specify whether an animation is running or paused.

Syntax :

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

Property Values:



  • running: This value is used to run/play an animation.
  • paused: This value is used to pause an animation.
  • initial: This value sets the animation-play-state property to the value of the parent element.
  • inherit: This value is used to set the .animation-play-state property to default(running).

Example: animation-play-state: running

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style animationPlayState Property
    </title>
    <style>
        div {
            height: 100px;
            width: 150px;
            font-size: 100px;
            -webkit-animation: movement 3s infinite;
            -webkit-animation-play-state: paused;
            animation: movement 3s infinite;
            color: darkgreen;
            position: relative;
  
            <!-- property value "running" -->
            animation-play-state: running;
        }
          
        @-webkit-keyframes movement {
            from {
                left: 50px;
            }
            to {
                left: 400px;
            }
        }
          
        @keyframes movement {
            from {
                left: 50px;
            }
            to {
                left: 400px;
            }
        }
    </style>
</head>
  
<body>
    <br>
    <div id="block">Geeks For Geeks</div>
  
</body>
  
</html>

chevron_right


Output :


Example: animation-play-state : paused

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style animationPlayState Property
    </title>
    <style>
        div {
            height: 100px;
            width: 150px;
            font-size: 100px;
            -webkit-animation: movement 3s infinite;
            -webkit-animation-play-state: paused;
            animation: movement 3s infinite;
            color: darkgreen;
            position: relative;
            
            <!-- property value "paused" -->
            animation-play-state: paused;
        }
          
        @-webkit-keyframes movement {
            from {
                left: 50px;
            }
            to {
                left: 400px;
            }
        }
          
        @keyframes movement {
            from {
                left: 50px;
            }
            to {
                left: 400px;
            }
        }
    </style>
</head>
  
<body>
    <button onclick="Play()">
      Click to make the object move
    </button>
  
    <script>
        function Play() {
            document.getElementById("block"
               ).style.WebkitAnimationPlayState = "running";
            
            document.getElementById("block"
               ).style.animationPlayState = "running";
        }
    </script>
    <br>
  
    <div id="block">Geeks For Geeks</div>
  
</body>
  
</html>

chevron_right


Output :

Example : animation-play-state : inherit

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style animationPlayState Property
    </title>
    <style>
        div {
            height: 50px;
            width: 150px;
            font-size: 100px;
            -webkit-animation: movement 3s infinite;
            -webkit-animation-play-state: paused;
            animation: movement 3s infinite;
            color: darkgreen;
            position: relative;
            animation-play-state: running;
        }
          
        h4 {
            width: 150px;
            -webkit-animation: movement 3s infinite;
            -webkit-animation-play-state: paused;
            animation: movement 3s infinite;
            color: darkgreen;
            position: relative;
            
            <!-- property value "inherit" -->
            animation-play-state: inherit;
        }
          
        @-webkit-keyframes movement {
            from {
                left: 50px;
            }
            to {
                left: 400px;
            }
        }
          
        @keyframes movement {
            from {
                left: 50px;
            }
            to {
                left: 400px;
            }
        }
    </style>
</head>
  
<body>
    <br>
    <div id="block">
        Gfg
        <h4> I'm inherited</h4>
    </div>
  
</body>
  
</html>

chevron_right


Output:


Example : animation-play-state : initial

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style animationPlayState Property
    </title>
    <style>
        div {
            height: 100px;
            width: 150px;
            font-size: 100px;
            -webkit-animation: movement 3s infinite;
            -webkit-animation-play-state: paused;
            animation: movement 3s infinite;
            color: darkgreen;
            position: relative;
            
            <!-- property value "initial" -->
            animation-play-state: initial;
        }
          
        @-webkit-keyframes movement {
            from {
                left: 50px;
            }
            to {
                left: 400px;
            }
        }
          
        @keyframes movement {
            from {
                left: 50px;
            }
            to {
                left: 400px;
            }
        }
    </style>
</head>
  
<body>
    <br>
    <div id="block">Geeks For Geeks</div>
  
</body>
  
</html>

chevron_right


Output :

Supported Browsers: The browser supported by animation-play-state property are listed below:

  • Chrome: 43.0(4.0 webkit)
  • Firefox: 16.0
  • Safari: 4.0 webkit
  • Edge: 10.0
  • Opera: 30.0(15.0 Webkit)


My Personal Notes arrow_drop_up

Computer Engineering student at St Francis Institute of Technology with good programming and problem-solving skills Passionate about solving real world problems through technology and implementing innovative ideas Looking to secure a responsible career opportunity to utilize my training and skills,

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.