Principles · The craft behind motion
Reduced motion减弱动效
- respectful
- accessible
- restrained
Users who have turned on reduced motion in their system should get fades or nothing at all, not movement and scaling forced on them.
When to use it
Every animation involving movement, scaling or looping must account for it; a plain fade can usually stay.
Parameters
prefers-reduced-motion: reduce · drops translate/scale · keeps ≤150ms cross-fade · linear
Recipe
Reduced motion → 150ms linearkeeps ≤150ms cross-fadeReduced motion → prefers-reduced-motion: reduce · drops translate/scale
One sentence for your AI
Handle prefers-reduced-motion: reduce for this animation by removing all movement and scaling, keeping only a fade of 150ms or less.