Fade Presets
Fade animations combine opacity transitions with optional directional movement. Each card below uses a different fade preset.
fade-in
Simple opacity fade from 0 to 1.
fade-up
Fades in while sliding up from below.
fade-down
Fades in while sliding down from above.
fade-left
Fades in while sliding from the right.
fade-right
Fades in while sliding from the left.
Slide Presets
Slide animations move elements without an opacity change, using larger offsets than fade variants.
Scale Presets
Scale animations grow elements from a smaller size while fading in.
scale-in
Scales from 0.9 with fade.
scale-up
Scales from 0.8 with fade (more dramatic).
Stagger
Staggered animations apply incremental delays to each element in a group, creating a cascading reveal effect.
Raw Keyframes
When presets don't fit, pass raw keyframe objects directly for custom animations. This example uses a combined rotate + scale + fade.
Custom Animation
Rotate + scale + fade using raw keyframes.
Reduced Motion
When prefers-reduced-motion: reduce is active, all animations complete
instantly. Elements reach their final state with zero duration — no motion,
no hidden content. Enable reduced motion in your OS settings or browser DevTools
(Rendering tab) to verify.