HTML | DOM Style animation Property

The style animation property makes it possible to animate transitions from one CSS style to another CSS style. It configures the timing, delay, duration and other details of how the sequence of animation should progress. The animation contains two components, one is CSS describing the component and another is a set of keyframes that indicate the start and end states of styles.

Syntax:

  • It is used to return the animation property
    object.style.animation
  • It is used to set the animation property
    object.style.animation="name duration timingFunction delay
    iterationCount direction fillMode playState"

Property Values

  • animationName: Describes the name of the keyframe attached to the selector.
  • animationDuration: Describes the time how long an animation takes place.
  • animationTimingFunction: Describes the speed of the animation.
  • animationDelay: Describes the delay before the animation will start.
  • animationIterationCount: Describes the number of times an animation takes place.
  • animationDirection: Describes if animation should play in reverse on alternate cycles.
  • animationFillMode: Describes what values to apply when animation ends.
  • animationPlayState: Describes whether an animation is running or paused.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <style
            #GFG {
                width: 90px;
                height: 90px;
                background: green;
                color: white;
                position: relative;
                text-align: center;
                  
                /* -webkit- is used for safari browser */
                -webkit-animation: GFG_Move_1 1s infinite;
                  
                animation: GFG_Move_1 1s infinite;
            }
              
            /* For Opera, Chrome and Safari browser */
            @-webkit-keyframes GFG_Move_1 {
                from {left: 250px;}
                to {left: 500px;}
            }
              
            /* For Opera, Chrome and Safari browser */
            @-webkit-keyframes GFG_Move_2 {
                from {left: 350px;top: 0px;}
                to {left: 350px;top: 200px;}
            }
              
            @keyframes GFG_Move_1 {
                from {left: 250px;}
                to {left: 500px;}
            }
              
            @keyframes GFG_Move_2 {
                from {left: 350px;top: 0px;}
                to {left: 350px;top: 200px;}
            }
        </style>
    </head>
      
    <body align="center">
        <button onclick = "myGeeks()">
            Change Animation
        </button>
          
        <p>
            Click on button to change the animation.
        </p>
          
        <script>
            function myGeeks() {
                  
                /* This code run on safari browser */
                document.getElementById("GFG").style.WebkitAnimation
                        = "GFG_Move_2 4s 2";
                          
                document.getElementById("GFG").style.animation
                        = "GFG_Move_2 4s 2";
            }
        </script>
          
        <div id="GFG">GFG</div>
    </body>
</html>                    

chevron_right


Output:

  • Before Click on the button: The div moves horizontally

  • After Click on the button: The div moves vertically

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML DOM Style animation Property
        </title>
          
        <style
            #GFG {
                width: 90px;
                height: 90px;
                background: green;
                position: relative;
                color: white;
                text-align: center;
                  
                /* /* For Opera, Chrome, Safari*/ */
                -webkit-animation: GFG_Move_1 1s infinite;
                  
                animation: GFG_Move_1 1s infinite;
            }
              
            /* For Opera, Chrome, Safari*/
            @-webkit-keyframes GFG_Move_1 {
                from {
                    left: 0px;
                }
                to {
                    left: 90px;
                }
            }
              
            /* For Opera, Chrome, Safari */
            @-webkit-keyframes GFG_Move_2 {
                from {
                    top: 0px; 
                    background: green; 
                    width: 100px;
                }
                to {
                    top: 200px; 
                    background: yellow; 
                    width: 150px; 
                    height: 150px;
                }
            }
              
            @keyframes GFG_Move_1 {
                from {
                    left: 0px;
                }
                to {
                    left: 95px;
                }
            }
              
            @keyframes GFG_Move_2 {
                from {
                    top: 0px; 
                    background: green; 
                    width: 100px;
                }
                to {
                    top: 200px; 
                    background: yellow; 
                    width: 150px; 
                    height: 150px;
                }
            }
        </style>
    </head>
      
    <body align="center">
          
        <button onclick="myGeeks()">
            Change Animation
        </button>
          
        <p>
            Click on button to change the animation.
        </p>
        <script>
            function myGeeks() {
                  
                /* For Opera, Chrome, Safari */
                document.getElementById("GFG").style.WebkitAnimation
                        = "GFG_Move_2 4s 2" 
                document.getElementById("GFG").style.animation
                        = "GFG_Move_2 4s 2";
            }
        </script>
          
        <div id = "GFG">GFG</div>
    </body>
</html>                    

chevron_right


    Output:

  • Before Click on the button:

  • After click on the button:

Supported Browsers: The browser supported by Style animation Property are listed below:

  • Google Chrome 43.0, 4.0 -webkit-
  • Internet Explorer 10.0
  • Mozila firefox 16.0, 5.0 -moz-
  • Opera 30.0, 15.0 -webkit-, 12.1, 12.0 -o-
  • Safari 9.0, 4.0 -webkit-


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.