Reduced motion
Provide equivalent low-motion treatments for travel, scaling, loops, and parallax.
Preview
Live preview
Respecting the user's prefers-reduced-motion setting by toning down or removing motion.
Authoritative vocabulary
Definition and close-term distinctions
English definitions are preserved verbatim from Animation Vocabulary; translations and distinctions help you choose precisely.
reduced-motionReduced motion
减弱动效Authoritative definition
Respecting the user's prefers-reduced-motion setting by toning down or removing motion.
Chinese translation
尊重用户的 prefers-reduced-motion 设置，降低或移除动态效果。
Design contract
Decide before this motion ships
Purpose, frequency, trigger, timing, interruptibility, and gesture rules shape the implementation.
Provide information-equivalent low-motion treatments for travel, scaling, loops, parallax, and physical motion.
Review every motion pattern, prioritizing continuous motion and large spatial travel.
Resolve from prefers-reduced-motion plus an explicit product setting, responding to changes live.
Place content at its stable position immediately and express state through static hierarchy, color, text, or a very short fade.
When preference changes, stop nonessential motion at its final state while preserving task progress.
Keep gesture functions available while removing momentum, bounce, and automatic following, with full keyboard and button paths.
Define per-pattern treatment: zero travel, fixed scale, stopped loops, frozen parallax, and static progress feedback.
Review notes
Pre-delivery review
- Review reduced motion and hardware acceleration separately because they address different concerns.
- Test every combination of operating-system preference and product setting.
Accessibility
Keep information accessible
Reduced motion
Define per-pattern treatment: zero travel, fixed scale, stopped loops, frozen parallax, and static progress feedback.