Animation elevates web experiences but the implementation approach matters for performance, maintainability, and designer-developer workflow.
Approach Overview
CSS Animations: Native browser animations using CSS keyframes and transitions. Zero dependencies.
Lottie: JSON-based animations exported from After Effects. Rendered via JavaScript library (lottie-web).
Rive: Interactive state machine animations. Designed in Rive editor, rendered via runtime.
Comparison
| Factor | CSS Animations | Lottie | Rive |
|---|---|---|---|
| File size | 0 KB (CSS only) | 5-100 KB (JSON per animation) | 5-50 KB (per animation) |
| Runtime size | 0 KB | 50-270 KB (lottie-web) | 80 KB (runtime) |
| Performance | GPU-accelerated | Canvas/SVG (moderate) | WASM or Canvas (fast) |
| Interactivity | Hover, focus, scroll | Play/pause/seek | Full state machines |
| Design tool | Code-only | After Effects/Figma plugins | Rive editor |
| Designer handoff | Designer creates specs | Designer exports JSON | Designer exports .riv |
| Complexity ceiling | Moderate | High (After Effects) | Very high (interactive) |
| Browser support | Universal | Universal | Universal (WASM) |
| React integration | className/style | react-lottie | @rive-app/react |
| Typical use cases | Transitions, hovers, loaders | Hero animations, icons, illustrations | Interactive onboarding, games, buttons |
| Learning curve | CSS knowledge | After Effects + Lottie | Rive editor |
When CSS Animations Win
- Simple transitions: Hover effects, page transitions, fades
- Performance-critical: Zero JavaScript overhead
- Loading animations: Spinners, skeleton screens
- Micro-interactions: Button states, menu transitions
- Responsive animations: Media query-based changes
When Lottie Wins
- Complex illustrations: Multi-element animated scenes
- Animated icons: Consistent, scalable, lightweight
- Onboarding flows: Step-by-step animated explanations
- Brand animations: Logo reveals, mascot movements
- After Effects workflow: Designers already use AE
When Rive Wins
- Interactive animations: State-based (idle, hover, active, error)
- Gaming elements: Character animations, particle effects
- Dynamic illustrations: Animations that respond to input
- Performance-sensitive: WASM runtime is fast
- Real-time interactivity: Drag-based, scroll-based interactions
Our Approach
We use CSS animations for transitions and micro-interactions (95% of cases), Framer Motion for React-specific orchestrated animations, and recommend Lottie for clients with After Effects-equipped design teams. Rive is our recommendation for highly interactive animations that go beyond what CSS and Framer Motion handle.
Add animation to your site with the right approach for your needs.