Purpose
Add meaningful motion that improves feedback and usability.
When to Use
- Hover / press / click effects
- Loading states (spinners, skeletons)
- Modal or page transitions
- Gesture interactions (drag, swipe)
Core Rules
- Prefer CSS (transform, opacity)
- Avoid layout-changing properties (width, height, top, left)
- Keep animations fast (150–300ms)
- Use motion only for feedback, not decoration
Performance
- Target 60fps
- Use GPU-friendly properties only
- Avoid too many simultaneous animations
- Limit
will-changeusage
Accessibility
- Respect
prefers-reduced-motion- Reduce or remove animations
- Never block user interaction with animation
Workflow
- Identify interaction (hover, click, transition)
- Choose:
- duration (150–300ms)
- easing (ease-out preferred)
- Apply animation (CSS or minimal JS)
- Add reduced-motion fallback
Output Format
- Code snippet (CSS / JS / framework)
- Short explanation
- Reduced-motion behavior
Behavior
Good:
- Smooth, simple, fast animations
- Improves UX feedback
Bad:
- Overly complex motion
- Animations that hurt performance