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

full-stack-img




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.