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
<!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: In this example, we will use animationIterationCount property
<!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
