animation-iteration-count

애니메이션을 몇 번 반복할지 정합니다. 값이 1이면 한 번 재생하고 멈추며, infinite면 페이지가 살아 있는 동안 계속 반복합니다.

클래스 목록

클래스	CSS	설명
`aicinf`	animation-iteration-count: infinite	무한 반복

Atomic은 무한 반복만 단일 클래스로 제공합니다. 유한 횟수는 animation 단축 클래스의 마지막 자리에 숫자를 넣어 지정합니다. 예: anshake-400ms-ease-2.

시각 데모

세 박스 모두 같은 회전 keyframes를 씁니다. 가운데 박스는 3회전 뒤 멈추므로, 페이지를 연 직후 몇 초 안에 차이가 드러납니다.

infinite — aicinf

멈추지 않고 계속 돕니다.

3 — anspinCW-2s-linear-3

3바퀴만 돌고 시작 각도로 되돌아가 멈춥니다.

infinite + alternate

무한 반복 + 왕복. 되감기 구간이 보입니다.

<!-- 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>

클래스별 상세

`aicinf`animation-iteration-count: infinite

애니메이션을 무한히 반복합니다. 사용자가 페이지를 떠나거나 apsp로 일시정지하기 전까지 절대 멈추지 않습니다. 진행률을 알 수 없는 대기 상태를 표현할 때 씁니다.

<!-- 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>

단축 클래스를 쓴다면 이미 포함되어 있습니다

anspinCW-2s-linear-infinite처럼 단축 클래스 안에 infinite를 이미 적었다면 aicinf를 따로 붙일 필요가 없습니다. 단축 속성이 뒤에 오면 오히려 덮어씁니다.

`an...-N`animation-iteration-count: N

단축 클래스의 마지막 토큰에 정수를 넣으면 그 횟수만큼만 재생합니다. 반복이 끝나면 요소는 시작 상태로 되돌아갑니다. 끝난 모습을 유지하려면 afmf를 함께 쓰세요.

<!-- 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>

실전 예시

반복은 다른 애니메이션 속성과 조합할 때 의미가 커집니다. 특히 animation-direction과 함께 쓰면 왕복 애니메이션이 됩니다.

<!-- 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>

실제 UI에서는 한 화면에 유한 반복과 무한 반복이 섞입니다. 등장은 1회, 상태 표시는 무한이 일반적인 조합입니다.

<!-- 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>

팁 / 주의사항

대표적 사용처

로딩 스피너, 깜빡이는 커서, 펄스 효과, 배경 그라데이션 애니메이션 등 지속적으로 반복해야 하는 모든 애니메이션에 사용합니다.

성능 주의

무한 반복 애니메이션은 화면 밖에 있어도 계속 합성(compositing)을 유발합니다. 리스트에 스피너가 수십 개 있으면 스크롤이 눈에 띄게 느려집니다. 보이지 않을 때는 apsp로 멈추거나 요소를 제거하세요.

0.5 같은 소수도 유효합니다

CSS 규격상 반복 횟수는 정수가 아니어도 됩니다. 0.5는 keyframes의 절반까지만 재생하고 멈춥니다. 다만 Atomic 클래스 문법에서는 소수점을 하이픈으로 적어야 합니다.

무한 반복은 접근성 설정을 존중해야 합니다

전정 장애가 있는 사용자에게 끝없이 움직이는 요소는 불편을 줍니다. prefers-reduced-motion이 켜진 환경에서는 무한 애니메이션을 끄는 것이 좋습니다.

animation animation-direction animation-play-state animation-fill-mode transition