animation-direction
Controls animation playback direction. adial is used for ping-pong (alternating) animations.
Class List
| Class | CSS | Description |
|---|---|---|
adin | animation-direction: normal | Forward playback (default) |
adir | animation-direction: reverse | Reverse playback |
adial | animation-direction: alternate | Alternating playback (forward → reverse) |
adialr | animation-direction: alternate-reverse | Reverse alternating (reverse → forward) |
Usage Examples
<!-- Alternating animation -->
<div class="adial aicinf">
Smoothly alternating element
</div>
<!-- Reverse playback -->
<div class="adir">
Element playing in reverse
</div>When to Use What?
| Situation | Recommended |
|---|---|
| Normal playback | adin |
| Reverse playback | adir |
| Smooth alternation (ping-pong) | adial |
| Reverse alternation | adialr |