CSS: animation-iteration-count

The animation-iteration-count property sets how many times a keyframe animation repeats.

What you will learn

How to run an animation once or several times
What infinite means
How to limit motion and respect reduced-motion preferences

Basic example

.spinner {
  animation: spin 800ms linear 3;
}

@keyframes spin {
  to { transform: rotate(1turn); }
}

The value 3 runs three cycles. The default is 1; infinite keeps repeating until the animation is stopped or the element is removed.

Use looping motion carefully

Continuous movement can distract or cause discomfort. Prefer a finite count, provide a pause mechanism when appropriate, and reduce or remove non-essential motion for users who request it.

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-iteration-count: 1; }
}