animation-iteration-count sets the number of times an animation plays.
To continually loop an animation, set the value to infinite.
If no value is set, the animation will play only once.
An animation with an animation-iteration-count value of 4.
The animation plays 4 times and then stops.
<style>
.animate {
width: 80px;
height: 80px;
background: steelblue;
animation: iteratingAnimation 3s;
animation-direction:alternate;
animation-iteration-count: 4;
}
@keyframes iteratingAnimation {
from { transform: none; }
to { transform: translateX(300%) rotate(270deg); }
}
</style>
<div class="animate"></div>
animation-iteration-count: number | infinite |
initial | inherit;
| Value | Description |
|---|---|
| number | Sets how many times an animation should be played. The default value is 1 |
| infinite | Plays animation infinitely (loop) |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different animation-iteration-count values.
Refresh the page to start over.
<style>
.animate-example {
width: 80px;
height: 80px;
background: steelblue;
animation: movingAnimation 3s;
animation-iteration-count: infinite;
}
@keyframes movingAnimation {
from { transform: none; }
to { transform: translateX(300%) rotate(180deg); }
}
</style>
<div class="animate-example"></div>
This table shows when animation-iteration-count support started for each browser.
 Chrome
|
43.0 | May 2015 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
30.0 | Jun 2015 |
 Safari
|
9.0 | Sep 2015 |
