CSS animation iteration count
CSS animation-iteration-count property defines number of cycles in an animation.
<style>
.container{
width:100%;
height:150px;
background-color:rgba(255,255,255,0.1);
position:relative;
}
.smallBox{
width:50px;
height:50px;
background-color:red;
color:white;
position:relative;
top:10%;
animation-name:moveIt;
animation-duration:3s;
animation-iteration-count:3;
}
@keyframes moveIt{
0%{
left:0%;
}
20%{
left:18%;
}
40%{
left:36%;
}
60%{
left:54%;
}
80%{
left:72%;
}
100%{
left:90%;
}
}
#iconTable, #iconTable td{
border:0px;
}
#iconTable td img{
margin:0px;
}
.browserSupport table, .browserSupport table td{
border:1px solid rgba(210,210,210,0.7);
border-collapse:collapse;
}
.browserSupport table td p, .browserSupport table td p{
text-align:center;
color:#170;
}
.browserSupport table{
border-radius:4px;
}
img{
border:0px;
}
</style>
<div class="container">
<div class="smallBox">1</div>
</div>
There are total 3 cycles or iterations in the above example.
Syntax
<style>
div{
animation-iteration-count: 5;
}
</style>In the above example, there are 5 number of cycles in an animation.
Value
There are two possible values of animation-iteration-count.
Animation-iteration-count = infinite | number
infinite
The animation cycles will repeat forever.
number
The number represents the total number of cycles in an animation.
The value of animation-iteration-count can not be negative. 0 value causes the animation to occur instantaneously. If the number is a fractional value, it represents a part of a cycle. For example, 4.5 means there will be four and half cycles.
Default value
The initial value of the animation-iteration-count is 1.
Applicable to
It is applicable to all of the elements including ::before and ::after pseudo elements.
Browser support
Browsers |  |  |  |  |  |
content | ✓ | -webkit- | -ms- | -o- | -moz- |
Use the above given prefixes with this property for the relevant browsers otherwise it'll not work for other browsers.