animation-iteration-count

animation-iteration-count sets how many keyframe cycles run. Fractional counts stop partway through a cycle; infinite keeps running until removed or paused.

Run two and a half cycles

Each cycle lasts one second. With linear normal direction and forwards fill, 2.5 cycles finish halfway along the path. Uncheck to reset.

<input class="run" id="run" type="checkbox" /><label for="run"
  >Run the demonstration; uncheck to reset</label
>
<div class="stage"><div class="box" aria-hidden="true"></div></div>

@keyframes travel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}
.stage {
  background: #eff6ff;
  padding: 1rem;
}
.box {
  width: 50px;
  height: 35px;
  background: #2563eb;
  margin-block: 0.5rem;
}
label {
  display: inline-block;
  padding: 0.75rem;
}
.run:checked ~ .stage .box {
  animation: travel 1s linear 0s 2.5 normal forwards;
}
@media (prefers-reduced-motion: reduce) {
  .run:checked ~ .stage .box {
    animation-name: none;
  }
}

Use a short, finite sequence

Three half-second iterations take 1.5 active seconds. The demonstration stops without needing an automatic loop or loader claim.

<input class="run" id="run" type="checkbox" /><label for="run"
  >Run the demonstration; uncheck to reset</label
>
<div class="stage"><div class="box" aria-hidden="true"></div></div>

@keyframes travel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}
.stage {
  background: #eff6ff;
  padding: 1rem;
}
.box {
  width: 50px;
  height: 35px;
  background: #2563eb;
  margin-block: 0.5rem;
}
label {
  display: inline-block;
  padding: 0.75rem;
}
.run:checked ~ .stage .box {
  animation: travel 0.5s linear;
  animation-iteration-count: 3;
}
@media (prefers-reduced-motion: reduce) {
  .run:checked ~ .stage .box {
    animation-name: none;
  }
}

Values and defaults

The initial value is 1 and the property is not inherited. A nonnegative number supplies a count; zero and fractions are valid, negative values are not. Infinite is a special keyword. With alternate directions, a fractional final cycle follows that cycle’s direction rather than always starting at 0%.

Common mistakes

A half cycle does not necessarily leave a visible halfway state without forwards/both fill. Repeats can restart abruptly in normal direction. Infinite is not restricted syntactically to loaders, but any ongoing motion needs appropriate user control and a reduced-motion alternative. Scroll-driven infinite timelines do not work like an ordinary endlessly running time animation. A later shorthand resets the count.

Learn animation-play-state, animation-direction, and animation-duration.

The demonstrations are stationary when prefers-reduced-motion:reduce is active. Their code remains available for inspection.

Sources and browser support

MDN: animation-iteration-count describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.