CSS animation-iteration-count Property

CSS `animation-iteration-count` Property

The animation-iteration-count property in CSS defines how many times an animation should repeat. It can be set to a specific number or loop infinitely.

1. Syntax

selector {
  animation-iteration-count: value;
}

2. Accepted Values

Value	Description
`infinite`	The animation repeats forever.
`1` (default)	The animation plays once.
`n` (number)	The animation repeats n times (e.g., `3` means it plays three times).

3. Example – Play Animation 3 Times

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation-name: move;
  animation-duration: 2s;
  animation-iteration-count: 3;
}

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(300px); }
}

✅ The box moves three times and then stops.

4. Example – Infinite Looping Animation

.box {
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

✅ The element rotates continuously forever.

5. Best Practices

✔ Use infinite carefully to avoid distracting users.
✔ Set a limit (e.g., 3 or 5) for animations that shouldn't loop endlessly.
✔ Combine with animation-direction to make smoother repeating animations.

Tag

Souy Soeng