animation-iteration-count

Published Jul 1, 2021Updated Oct 4, 2023
Contribute to Docs

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;
}
}

animation-iteration-count-example-1

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%;
}
}

animation-iteration-count-example-2

All contributors

Looking to contribute?

Learn CSS on Codecademy