📌 What Is animation-iteration-count?

The animation-iteration-count property controls how many times an animation repeats. This lets you loop animations, repeat them a specific number of times, or even run them infinitely. It pairs with animation-name and animation-duration to control playback. 🔄✨

🧩 Basic Syntax

animation-iteration-count: 1;
animation-iteration-count: 3;
animation-iteration-count: infinite;

✔ The default value is 1 (animation plays once).
✔ Use infinite for endless looping.

🔢 Using Numbers

animation-iteration-count: 5;

✔ Animation repeats exactly 5 times and then stops.

♾️ Using infinite

animation-iteration-count: infinite;

✔ Great for loaders, spinners, and ongoing animations.

🧪 Example Animation

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

.ball {
  animation-name: bounce;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

✔ The element will bounce continuously.

🎯 Combining iteration count with direction

When combined with animation-direction, you can create beautiful “ping-pong” effects.

animation: move 1s infinite alternate;

✔ Plays forward → backward → forward → backward forever.

⏳ Fractional Iteration Counts

You can even use decimal values! A fractional number means the animation plays partially.

animation-iteration-count: 2.5;

✔ Plays fully twice, then half-way on the third loop.

🎨 Real-World Examples

1️⃣ Typing Effect Loop

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.cursor {
  animation: blink 1s infinite;
}

2️⃣ Pulsing Button

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.button {
  animation: pulse 0.8s infinite ease-in-out;
}

✨ iteration count in Shorthand

animation: bounce 1.2s ease-in-out 0s 3;

🛠️ Tips for Using Iteration Count

🔍 Debugging Tips

🔗 Helpful Resources