Micro-interactions are the small moments — a button press, a toggle switch, a success checkmark — that signal the system is responding.
When to Animate
- State changes (hover, active, disabled)
- Feedback (success, error, loading)
- Orientation (page transitions, panel slides)
Keep It Fast
UI animations should be 150–300ms. Anything longer feels sluggish. Use ease-out for entrances, ease-in for exits.
Respect Reduced Motion
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}