animation-direction
애니메이션 재생 방향을 제어합니다. adial은 핑퐁(왕복) 애니메이션에 사용합니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 설명 |
|---|---|---|
adin | animation-direction: normal | 정방향 재생 (기본값) |
adir | animation-direction: reverse | 역방향 재생 |
adial | animation-direction: alternate | 왕복 재생 (정방향 → 역방향) |
adialr | animation-direction: alternate-reverse | 역왕복 재생 (역방향 → 정방향) |
사용 예시
<!-- Alternating animation -->
<div class="adial aicinf">
Smoothly alternating element
</div>
<!-- Reverse playback -->
<div class="adir">
Element playing in reverse
</div>언제 뭘 쓸까?
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">상황 | 추천 |
|---|---|
| Normal playback | adin |
| Reverse playback | adir |
| Smooth alternation (ping-pong) | adial |
| Reverse alternation | adialr |