Animations
Animation patterns and performance tips for smooth interactions.
Transition Utilities
Opacity Transition
Fade effect on hover.
Scale Transform
Scale up on hover.
Combined Transitions
Multiple properties animated together.
Keyframe Animations
Pulse
Loading skeleton effect.
Spin
Loading spinner.
Bounce
Attention-grabbing bounce.
Ping
Notification indicator.
Custom Animations
Fade In
Slide Up
Reduced Motion
Respect user preferences for reduced motion.
Animations disabled when
prefers-reduced-motion is set
Timing Reference
| Type | Duration | Use Case |
|---|---|---|
| Fast | 100-200ms | Hovers, toggles |
| Standard | 200-300ms | Most transitions |
| Complex | 300-500ms | Page transitions, modals |
Performance Tips
- Use transform and opacity - GPU-accelerated properties
- Avoid layout shifts - Don't animate width/height
- will-change sparingly - Only for known animations
- Respect motion preferences - Use
prefers-reduced-motion