HTML | DOM Style animationIterationCount Property

The Style animationIterationCount property in HTML DOM is used to set or return how many times an animation should be played.

Syntax:

  • It is used to return the animationIterationCount property.
    object.style.animationIterationCount
  • It is used to set the animationIterationCount property.
    object.style.animationIterationCount = "number|infinite|initial|
    inherit"

Property Values:



  • number: It is used to set how many times the animation will play. Its default value is 1.
  • infinite: It sets the animation will play infinite times.
  • initial: It sets the animationIterationCount property to its default value.
  • inherit: This property value is inherited from its parent element.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style animationIterationCount Property
    </title>
      
    <style
        div {
            width: 80px;
            height: 80px;
            background: lightgreen;
            position: relative;
              
            /* For Chrome, Safari, Opera browsers */
            -webkit-animation: mymove 2s 1;
            animation: mymove 2s 1;
        }
          
        /* Chrome, Safari, Opera */
        @-webkit-keyframes mymove {
            from { 
                left: 0px;
                top: 0px;
            }
            to {
                left: 250px;
                top: 250px;
            }
        }
          
        @keyframes mymove {
            from {
                left: 0px;
                top: 0px;
            }
            to {
                left: 250px;
                top: 250px;
                background-color:green;
            }
        }
    </style>
</head>
<body>
    <p>
        Click on the button to set 
        animation iteration count!
    </p>
      
    <button onclick="myGeeks()">
        Click Here!
    </button>
    <br>
      
    <script>
      
        /* For Chrome, Safari, and Opera browsers */
        function myGeeks() {
            document.getElementById("GFG").style.WebkitAnimationIterationCount 
                    = "10"; 
            document.getElementById("GFG").style.animationIterationCount = "10";
        }
    </script>
      
    <div id="GFG"></div>
    
</body>
</html>                    

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>  
    <title>
        HTML DOM Style animationIterationCount Property
    </title>
  
    <style
        div {
            width: 200px;
            height: 110px;
            background: green;
            text-align: center;
            padding-top:50px;
            position: relative;
              
            /* Chrome, Safari, Opera */
            -webkit-animation: mymove 2s 2; 
            animation: mymove 2s 2;
        }
          
        /* Chrome, Safari, Opera */
        @-webkit-keyframes mymove {
            from {left: 400px;}
            to {left: 0px;}
        }
          
        @keyframes mymove {
            from {left: 400px;}
            to {left: 0px;}
        }
    </style>
</head>
<body>
    <p>
        Click on the button to set
        animation iteration count!
    </p>
      
    <button onclick="myGeeks()">
        Click Here!
    </button>
    <br>
      
    <script>
        function myGeeks() {
              
            /* For Chrome, Safari, and Opera browsers */
            document.getElementById("GFG").style.WebkitAnimationIterationCount
                = "infinite"; 
            document.getElementById("GFG").style.animationIterationCount
                = "infinite";
        }
    </script>
    <br>
      
    <div id="GFG">
        Style animationIterationCount Property
    </div>
  
</body>
</html>                    

chevron_right


Output:

Supported Browsers: The browser supported by DOM Style animationIterationCount property are listed below:

  • Chrome 43.0
  • Firefox 16.0, 5.0 -moz-
  • Opera 30.0
  • Safari 9.0


My Personal Notes arrow_drop_up

Small things always make you to think big

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.