animation-iteration-count

Defines how many times an animation runs.

Syntax

animation-iteration-count: <value>;

where <value> can be one of the following:

  • Number value: 3, 300
  • inifinite will run animation on endless loop

Note: providing one value will apply to all animation-name values. Additional comma separated values will apply correspondingly.

Example 1

Run animation fadeoutfadein two times:

div {
height: 200px;
width: 200px;
background-color: blue;
animation-duration: 2s;
animation-name: fadeoutfadein;
animation-iteration-count: 2;
}
@keyframes fadeoutfadein {
0% {
background-color: blue;
}
50% {
background-color: white;
}
100% {
background-color: blue;
}
}

Example 2

Run animation fadeoutfadein two times and slideleft one time:

div {
height: 200px;
width: 200px;
background-color: blue;
animation-duration: 4s, 4000ms;
animation-name: fadeoutfadein, slideleft;
animation-iteration-count: 1, 2;
}
@keyframes fadeoutfadein {
0% {
background-color: blue;
}
50% {
background-color: white;
}
100% {
background-color: blue;
}
}
@keyframes slideleft {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy

Contributors