AAtomic CSS

animation-direction

애니메이션 재생 방향을 제어합니다. keyframes를 매 회 처음부터 다시 재생할지, 거꾸로 재생할지, 앞뒤로 왕복할지를 결정합니다. adial은 핑퐁(왕복) 애니메이션에 사용합니다.

클래스 목록

클래스CSS설명
adinanimation-direction: normal정방향 재생 (기본값)
adiranimation-direction: reverse역방향 재생
adialanimation-direction: alternate왕복 재생 (정방향 → 역방향)
adialranimation-direction: alternate-reverse역왕복 재생 (역방향 → 정방향)

시각 데모

네 박스 모두 동일한 anspinCW-2s-linear-infinite 애니메이션이며, 방향 클래스만 다릅니다. 노란 테두리가 위쪽 변이니 회전 방향을 보세요.

normal — adin

시계 방향으로만 계속 돕니다.

reverse — adir

반시계 방향으로만 계속 돕니다.

alternate — adial

시계 방향으로 한 바퀴 돈 뒤 반시계로 되돌아옵니다.

alternate-reverse — adialr

반시계 방향으로 먼저 돈 뒤 시계 방향으로 되돌아옵니다.

<!-- The four boxes above -->
<div class="w6rem h6rem bg6366F1 br8px bt4pxsolidFACC15 anspinCW-2s-linear-infinite adin"></div>
<div class="w6rem h6rem bg6366F1 br8px bt4pxsolidFACC15 anspinCW-2s-linear-infinite adir"></div>
<div class="w6rem h6rem bg6366F1 br8px bt4pxsolidFACC15 anspinCW-2s-linear-infinite adial"></div>
<div class="w6rem h6rem bg6366F1 br8px bt4pxsolidFACC15 anspinCW-2s-linear-infinite adialr"></div>

클래스별 상세

adinanimation-direction: normal

기본값입니다. 매 반복마다 keyframes를 0%에서 100%로 재생하고, 끝나면 즉시 0% 상태로 되돌아가 다시 시작합니다. 되돌아가는 순간은 애니메이션 없이 튀듯 처리되므로, 시작과 끝 프레임이 많이 다르면 끊김이 보입니다.

<!-- Default: 0% -> 100%, then jump back to 0% -->
<div class="anfadeIn-1s-ease adin">
  Plays forward every cycle
</div>

adiranimation-direction: reverse

keyframes를 100%에서 0% 방향으로 재생합니다. easing 함수도 함께 뒤집혀 적용되므로, ease-in으로 정의한 애니메이션은 reverse에서 ease-out처럼 느껴집니다.

<!-- Counter-clockwise spinner -->
<div class="anspinCW-2s-linear-infinite adir w4rem h4rem">
  Spins the other way
</div>

keyframes를 다시 쓸 필요가 없습니다

닫기 애니메이션을 만들려고 열기 keyframes를 역순으로 복제할 필요가 없습니다. 같은 keyframes에 adir만 붙이면 됩니다.

adialanimation-direction: alternate

홀수 번째 반복은 정방향, 짝수 번째 반복은 역방향으로 재생합니다. 시작 프레임으로 튀는 현상이 없어 부드럽게 반복되는 유일한 방향입니다. 반복 횟수가 2 이상일 때만 의미가 있습니다.

<!-- Breathing badge: zooms in, then zooms back out -->
<span class="anzoomIn-1-5s-ease-in-out-infinite adial db">
  LIVE
</span>

adialranimation-direction: alternate-reverse

alternate와 같지만 첫 반복이 역방향입니다. 즉 끝 프레임에서 시작해 시작 프레임으로 갑니다. 여러 요소를 살짝 어긋나게 움직여 서로 반대 위상으로 만들 때 유용합니다.

<!-- Starts at the end state, then walks forward -->
<div class="anslideUp-800ms-ease-infinite adialr">
  Starts from the finished frame
</div>

실전 예시

방향 클래스는 animation 단축 클래스 뒤에 붙여 조합합니다. 단축 클래스에 반복 횟수가 이미 들어 있어야 왕복이 눈에 보입니다.

<!-- Skeleton shimmer: sweeps right, then sweeps back
     instead of snapping to the start on every cycle -->
<div class="pr oh h2rem br4px bg18181B">
  <div class="pa t0 l0 w100p h100p bglg-to-r-6366F1-A855F7 anslideRight-1-2s-ease-in-out-infinite adial"></div>
</div>

<!-- Sync indicator: two arrows spinning against each other -->
<div class="df aic gap8px">
  <span class="w4rem h4rem br50p b2pxsolid38BDF8 anspinCW-2s-linear-infinite adin"></span>
  <span class="w4rem h4rem br50p b2pxsolid6366F1 anspinCW-2s-linear-infinite adir"></span>
</div>

언제 뭘 쓸까?

상황추천이유
로딩 스피너, 페이드인 등 한 방향 진행adin기본값이라 굳이 붙이지 않아도 됩니다
닫기 · 되돌리기 애니메이션adir여는 keyframes를 그대로 재사용합니다
숨쉬기 · 펄스 · 흔들림 반복adial aicinf시작 프레임으로 튀지 않아 끊김이 없습니다
여러 요소를 반대 위상으로 움직일 때adialr aicinf같은 애니메이션을 반 사이클 어긋나게 시작합니다

팁 / 주의사항

alternate는 반복 횟수 2 이상에서만 의미가 있습니다

adial을 붙여도 반복이 1회면 정방향 1회로 끝나 아무 차이가 없습니다. aicinf나 단축 클래스의 반복 횟수와 반드시 함께 쓰세요.

alternate는 실제 재생 시간을 두 배로 만듭니다

duration은 한 방향 기준입니다. 2s + alternate는 왕복 한 사이클에 4초가 걸립니다. 체감 속도가 느려 보이면 duration을 절반으로 줄이세요.

animation 단축 클래스가 방향을 덮어씁니다

an... 단축 클래스는 CSS의 animation 단축 속성이라 명시하지 않은 하위 값을 초기화합니다. 방향 클래스는 반드시 단축 클래스보다 나중에 적용되어야 합니다.

fill-mode와 함께 쓸 때 헷갈립니다

adir에서 forwards는 재생이 끝난 지점, 즉 keyframes의 0% 프레임을 유지합니다. 100%가 아닙니다.

animationanimation-iteration-countanimation-fill-modeanimation-play-statetransition