CSS animation-iteration-count Property
CSS animation-iteration-count Property
CSS animation-iteration-count property sets the number of times an animation cycle should be played before stopping.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid #000;
line-height: 6;
text-align: center;
animation: myAnimation 1s;
-webkit-animation: myAnimation 1s; /* Safari 4.0 - 8.0 */
animation-iteration-count: 2;
-webkit-animation-iteration-count: 2; /* Safari 4.0 - 8.0 */
}
@-webkit-keyframes myAnimation {
from {border-radius: 0%;}
to {border-radius: 50%;}
}
@keyframes myAnimation {
from {border-radius: 0%;}
to {border-radius: 50%;}
}
</style>
</head>
<body>
<h1>CSS animation-iteration-count Property</h1>
<div>
Div
</div>
</body>
</html>
Syntax
Using CSS
element{
animation-iteration-count: 2;
}
Using Javascript
object.style.animationIterationCount="2";
Animatable
No, animation-iteration-count property is not animatable. CSS Animatable Properties Reference.
Default Value
Default value for CSS animation-iteration-count property is 1.
Property Value
The following table provides a list of values for CSS animation-iteration-count property.
| Value | Explanation |
|---|
| infinite | Specifies that the animation will repeat forever. |
| Number | Specifies that the number of times the animation will repeat. |
Running Infinite Times
In the following example, we will demonstrate how to run an animation for infinite number of times.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid #000;
line-height: 6;
text-align: center;
animation: myAnimation 1s;
-webkit-animation: myAnimation 1s; /* Safari 4.0 - 8.0 */
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
}
@-webkit-keyframes myAnimation {
from {border-radius: 0%;}
to {border-radius: 50%;}
}
@keyframes myAnimation {
from {border-radius: 0%;}
to {border-radius: 50%;}
}
</style>
</head>
<body>
<h1>CSS animation-iteration-count Property</h1>
<div>
Div
</div>
</body>
</html>
Using JavaScript
In the following example, we will demonstrate how to change the CSS animation-iteration-count property of an element using JavaScript.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid #000;
line-height: 6;
text-align: center;
margin-bottom: 25px;
}
@-webkit-keyframes myAnimation {
from {border-radius: 0%;}
to {border-radius: 50%;}
}
@keyframes myAnimation {
from {border-radius: 0%;}
to {border-radius: 50%;}
}
</style>
</head>
<body>
<h1>CSS animation-iteration-count Property</h1>
<div>
Div
</div>
<button onclick="myFunction()">Click Me</button>
<script>
var x = document.getElementsByTagName("div")[0];
function myFunction(){
x.style.animationName = "myAnimation";
x.style.WebkitAnimationName = "myAnimation";
x.style.animationDuration = "1s";
x.style.WebkitAnimationDuration = "1s";
x.style.animationIterationCount = "3";
x.style.WebkitAnimationIterationCount = "3";
}
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
Share this Page
Meet the Author
