animation-iteration-count
Sets how many times an animation repeats. A value of 1 plays it once and stops, while infinite keeps it running for as long as the page lives.
Class List
| Class | CSS | Description |
|---|---|---|
aicinf | animation-iteration-count: infinite | Infinite loop |
Atomic ships only the infinite value as a standalone class. A finite count is written as the last token of the animation shorthand class, for example anshake-400ms-ease-2.
Live Demo
All three boxes share the same rotation keyframes. The middle one stops after three turns, so the difference shows up within a few seconds of opening the page.
infinite — aicinf
Keeps turning and never stops.
3 — anspinCW-2s-linear-3
Turns three times, snaps back to the start angle, and stops.
infinite + alternate
Infinite plus alternate, so the unwind is visible.
<!-- Same keyframes, different iteration counts -->
<div class="w6rem h6rem bg6366F1 br8px anspinCW-2s-linear-infinite"></div>
<div class="w6rem h6rem bg38BDF8 br8px anspinCW-2s-linear-3"></div>
<div class="w6rem h6rem bgA855F7 br8px anspinCW-2s-linear-infinite adial"></div>Class Details
aicinfanimation-iteration-count: infinite
Repeats the animation forever. It never stops until the user leaves the page or you pause it with apsp. Use it for waiting states whose progress cannot be measured.
<!-- Loading spinner that never stops -->
<div class="w4rem h4rem br50p b2pxsolid27272A bt2pxsolid38BDF8 anspinCW-800ms-linear-infinite"></div>
<!-- Blinking caret -->
<span class="w2px h2rem bg38BDF8 db anblink-1s-step-end-infinite"></span>The shorthand class may already include it
If the shorthand already spells out infinite, as in anspinCW-2s-linear-infinite, there is no need to add aicinf. Worse, a shorthand applied later would override it.
an...-Nanimation-iteration-count: N
Put an integer in the last token of the shorthand class to play the animation exactly that many times. When the repeats end, the element snaps back to its starting state. Add afmf to hold the final frame instead.
<!-- Shake the field 2 times on a validation error -->
<input class="b1pxsolidEF4444 br6px p12px anshake-400ms-ease-2" />
<!-- Bounce the badge exactly once when it appears -->
<span class="br50p bgEF4444 w8px h8px db anbounce-600ms-ease-1"></span>Practical Example
Iteration count matters most in combination with the other animation properties, in particular animation-direction, which turns repeats into a bounce.
<!-- Infinite loading spinner -->
<div class="aicinf anspinCW-1s-linear-infinite w4rem h4rem br50p">
Loading...
</div>
<!-- Infinite pulse on a notification dot -->
<div class="aicinf anzoomIn-1-2s-ease-in-out-infinite adial">
You have new notifications
</div>Real interfaces mix finite and infinite counts on the same screen: play the entrance once, keep the status indicator running.
<!-- Toast: slides in once, then the dot keeps pulsing -->
<div class="df aic gap12px p16px br8px bg18181B b1pxsolid27272A anslideUp-300ms-ease-1">
<span class="w8px h8px br50p bg22C55E anzoomIn-1-4s-ease-in-out-infinite adial"></span>
<p class="fs14px cFAFAFA">Saved to your library</p>
</div>
<!-- Attention nudge: shakes 3 times, then stops for good -->
<button class="py12px px16px br6px bg6366F1 cFFFFFF anshake-500ms-ease-3">
Finish setup
</button>Tips and Pitfalls
Common use cases
Used for all continuously repeating animations: loading spinners, blinking cursors, pulse effects, background gradient animations, etc.
Performance note
An infinite animation keeps the compositor busy even when it is scrolled off screen. Dozens of spinners in a list will visibly hurt scrolling. Pause them with apsp or unmount the element when it is not visible.
Fractional counts such as 0.5 are legal
The spec does not require an integer. A count of 0.5 plays only half of the keyframes and stops. In Atomic class syntax the decimal point is written as a hyphen.
Infinite motion should respect accessibility settings
Endless movement is uncomfortable for users with vestibular disorders. Turn infinite animations off when prefers-reduced-motion is enabled.