Interaction Design Skill

When to use

• Adding microinteractions to UI components
• Designing hover, focus, and active states
• Implementing feedback patterns (loading, success, error)
• Creating purposeful motion that enhances usability

Core principles

1. Purpose: Every animation should serve a function (guide attention, provide feedback, indicate state)
2. Performance: Use transform and opacity only (GPU-accelerated)
3. Duration: 150-300ms for micro, 300-500ms for transitions, never > 1s
4. Easing: ease-out for entrances, ease-in for exits, ease-in-out for state changes
5. Accessibility: Respect prefers-reduced-motion

Common patterns