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: In this example, we will use animationIterationCount property
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 = "myBeginner()" > Click Here! </ button > < br > < script > /* For Chrome, Safari, and Opera browsers */ function myBeginner() { document.getElementById("GFG") .style.WebkitAnimationIterationCount = "10"; document.getElementById("GFG") .style.animationIterationCount = "10"; } </ script > < div id = "GFG" ></ div > </ body > </ html > |
Output:
Example 2: In this example, we will use animationIterationCount property
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 = "myBeginner()" > Click Here! </ button > < br > < script > function myBeginner() { /* 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