animation-direction
Controls the playback direction of an animation: whether each cycle restarts from the first keyframe, plays backwards, or bounces back and forth. adial is used for ping-pong 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) |
Live Demo
All four boxes run the exact same anspinCW-2s-linear-infinite animation and differ only in the direction class. The yellow edge marks the top, so watch which way it travels.
normal — adin
Spins clockwise, forever.
reverse — adir
Spins counter-clockwise, forever.
alternate — adial
Spins clockwise one turn, then unwinds back.
alternate-reverse — adialr
Unwinds counter-clockwise first, then winds back.
<!-- 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>Class Details
adinanimation-direction: normal
The default. Every repetition plays the keyframes from 0% to 100%, then snaps instantly back to the 0% state and starts over. That snap is not animated, so a visible jump appears whenever the first and last frames differ a lot.
<!-- Default: 0% -> 100%, then jump back to 0% -->
<div class="anfadeIn-1s-ease adin">
Plays forward every cycle
</div>adiranimation-direction: reverse
Plays the keyframes from 100% toward 0%. The easing function is reversed along with it, so an animation authored with ease-in feels like ease-out when reversed.
<!-- Counter-clockwise spinner -->
<div class="anspinCW-2s-linear-infinite adir w4rem h4rem">
Spins the other way
</div>No need to author a second set of keyframes
You do not have to duplicate an opening animation in reverse order to build a closing one. Reuse the same keyframes and add adir.
adialanimation-direction: alternate
Odd repetitions play forward, even repetitions play backward. There is no snap back to the first frame, which makes it the only direction that loops seamlessly. It is only meaningful when the iteration count is 2 or more.
<!-- 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
Same as alternate, but the first repetition runs backwards, starting at the last frame and moving toward the first. Handy for driving several elements in opposite phase to each other.
<!-- Starts at the end state, then walks forward -->
<div class="anslideUp-800ms-ease-infinite adialr">
Starts from the finished frame
</div>Practical Example
Direction classes are composed after the animation shorthand class. The shorthand must already carry an iteration count for the bounce to be visible.
<!-- 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>When to Use What?
| Situation | Recommended | Why |
|---|---|---|
| One-way motion: spinners, fade-ins | adin | It is the default, so you rarely need to write it |
| Closing or undo animations | adir | Reuses the opening keyframes as-is |
| Breathing, pulsing, wobbling loops | adial aicinf | No snap back to the first frame, so no visible stutter |
| Driving elements in opposite phase | adialr aicinf | Starts the same animation half a cycle out of step |
Tips and Pitfalls
alternate only means something with 2 or more iterations
With a single repetition, adial plays forward once and stops, exactly like the default. Always pair it with aicinf or an iteration count in the shorthand.
alternate doubles the perceived cycle length
Duration covers one direction only. 2s plus alternate takes four seconds for a full round trip. Halve the duration if the motion feels sluggish.
The animation shorthand class overrides direction
an... classes compile to the CSS animation shorthand, which resets every sub-property you do not name. The direction class must therefore be applied after the shorthand.
Combining it with fill-mode is confusing
With adir, forwards holds the frame where playback ended, which is the 0% keyframe, not the 100% one.