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:
HTML
<!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> |
Output:
Example 2:
HTML
<!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> |
Output:
Supported Browsers: The browser supported by DOM Style animationIterationCount property are listed below:
- Chrome 43.0
- Edge 12.0
- Internet Explorer 10.0
- Firefox 16.0
- Opera 30.0
- Safari 9.0
Please Login to comment...