CSS animation-iteration-count property specifies the number of times an animation cycle is played. It can be a number or infinite. In case animation-name has multiple values, animation-iteration-count can also have multiple values.
CSS property animation-iteration-count
| CSS version: | CSS 3 |
| Value: | [number | infinite] [, ...]* |
| Initial: | 1 |
| Applies to: | all elements, ::before and ::after pseudo-elements |
| Inherited: | no |
Example – animation-iteration-count
In the following code, CSS property animation-iteration-count can be changed to the following values
- 1
- 2
- 5
- infinite
<style>
@keyframes left-to-right {
0% {left:0;}
100% {left:200px;}
}
.box {
position: fixed;
background-color:lightgreen;
animation-name: left-to-right;
animation-duration:4s;
animation-iteration-count:1;
}
</style>
<div class=box>Object</div>animation-iteration-count refresh
