Last Updated: November 21, 2025
Focus Areas
| Focus |
|---|
Design motion to reveal, transition, or give feedback
|
Honor `prefers-reduced-motion` with subtle alternatives
|
Commands & Queries
transition: opacity 180ms ease-out
Use short fade transitions
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
Apply material easing
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0ms; } }
Respect reduced motion
Summary
Use timing and easing to emphasize states and provide reduced-motion options.
💡 Pro Tip:
Keep motion purposeful, mimic physics, and respect reduced-motion preferences.