In this section, we will learn what the animation-iteration-count property is and how to use it in CSS.
Click here to run the example of animation-iteration-count property.
CSS animation-iteration-count Property Definition and Usage
Who said that an animation can only occur once?! In fact, we can iterate an animation as much as we want using CSS animation-iteration-count.
Note: this property is used for those animations that are created by @keyframes rule.
CSS animation-iteration-count Property Syntax
animation-iteration-count: number|infinite|initial|inherit;CSS animation-iteration-count Property Value
The value we set for animation-iteration-count is any positive number. This number declares the iteration count.
Also, the default value for this property is 1 which means the animation should occur only one time and then stop.
Notes:
-
The value 0 means no animation at all.
-
We can set the value “infinite” for this property as well. Using
this property means the animation should iterate infinitely. -
The two global values “initial” and “inherit” could
also be used for this property.
Example: animation-iteration-count property in CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{
margin:unset;
box-sizing: border-box;
}
button{
width:10em;
height:10em;
display: block;
margin-top:1em;
margin-bottom: 1em;
margin-left: auto;
margin-right:auto;
border-radius: 0.5em;
border: thin solid lightgray;
animation-name: rotate_animation1;
animation-duration:300ms;
animation-delay: 3s;
animation-iteration-count:3;
}
@keyframes rotate_animation1{
from{
transform: rotateZ(0deg);
}to{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<button>This is button</button>
</body>
</html>How Does CSS animation-iteration-count Property Work?
In this example, we’ve set the value of the animation-iteration-count to 3. This means the animation on the target element will iterate for 3 times in a row and then it’ll stop.