Animations
Motion utilities from src/scss/animations/. More keyframes will land here over time.
Fade in
animate-fade-in — opacity 0 → 1
<div class="animate-fade-in">…</div>
Fade out
animate-fade-out — opacity 1 → 0
<div class="animate-fade-out">…</div>
Slide up
<div class="animate-slide-up">…</div>
Slide down
<div class="animate-slide-down">…</div>
Slide left
<div class="animate-slide-left">…</div>
Slide right
<div class="animate-slide-right">…</div>
Pop
animate-pop — fade + scale
<div class="animate-pop">…</div>
Shimmer
Also used by placeholder glow utilities.
<div class="animate-shimmer">…</div>
Durations
Pair with any animate-* class: duration-100 … duration-1000. Default enter motion is --duration-enter (0.75s).
300ms
500ms
700ms
1000ms