Skip to content
Related Articles

Related Articles

CSS | animation-play-state Property

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Aug, 2022
View Discussion
Improve Article
Save Article

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: 

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>                                                 

Output:

  

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

  • Google Chrome 43.0 and above
  • Edge 12.0 and above
  • Internet Explorer 10.0 and above
  • Firefox 16.0 and above
  • Opera 30.0 and above
  • Safari 9.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!