prefers-reduced-motion
CSS媒体查询标准特性,允许网页感知用户在操作系统层面开启的「减少动画」偏好设置,用于为运动敏感用户提供静态或极简替代方案,是Web无障碍的基本要求
时间轴 (近 90 天)
正确的减少动画降级应是完全移除动画、跳转到终态,或使用静态替代图,而非简单地animation-play-state: paused
prefers-reduced-motion是CSS媒体查询中的一项用户偏好设置,当用户在操作系统层面开启减少动态效果后,浏览器会向页面暴露该标志
常见的错误降级做法是冻结当前帧(animation-play-state: paused),导致画面停在旋转中途、缩放一半或淡入半透明的中间态,对运动敏感用户更易引发不适
开发者应通过 @media (prefers-reduced-motion: reduce) 为依赖复杂过渡效果的开场信封动画提供静态或极简替代方案,并确保信件正文无需等待动画结束即可读取。
前庭功能障碍、偏头痛或对运动敏感的用户会启用操作系统层面的「减少动画」设置,以避免视差滚动、大幅位移或持续动画引发不适。
scroll-behavior已在各大浏览器稳定支持超过四年,prefers-reduced-motion在所有主流浏览器全面支持
平滑滚动应使用@media (prefers-reduced-motion)包裹,以照顾前庭功能敏感用户,关闭动画后scroll-margin定位效果依然保留
WCAG 2.1标准的Success Criterion 2.3.3要求网站遵守「减少动态效果」准则,并尊重prefers-reduced-motion偏好设置
全部知识事实 (8)
正确的减少动画降级应是完全移除动画、跳转到终态,或使用静态替代图,而非简单地animation-play-state: paused
50%待验证prefers-reduced-motion是CSS媒体查询中的一项用户偏好设置,当用户在操作系统层面开启减少动态效果后,浏览器会向页面暴露该标志
50%待验证常见的错误降级做法是冻结当前帧(animation-play-state: paused),导致画面停在旋转中途、缩放一半或淡入半透明的中间态,对运动敏感用户更易引发不适
50%待验证开发者应通过 @media (prefers-reduced-motion: reduce) 为依赖复杂过渡效果的开场信封动画提供静态或极简替代方案,并确保信件正文无需等待动画结束即可读取。
50%待验证前庭功能障碍、偏头痛或对运动敏感的用户会启用操作系统层面的「减少动画」设置,以避免视差滚动、大幅位移或持续动画引发不适。
50%待验证scroll-behavior已在各大浏览器稳定支持超过四年,prefers-reduced-motion在所有主流浏览器全面支持
50%待验证平滑滚动应使用@media (prefers-reduced-motion)包裹,以照顾前庭功能敏感用户,关闭动画后scroll-margin定位效果依然保留
50%待验证WCAG 2.1标准的Success Criterion 2.3.3要求网站遵守「减少动态效果」准则,并尊重prefers-reduced-motion偏好设置
50%