[控场AI]
概念减少动态效果 / reduce motion

prefers-reduced-motion

CSS媒体查询标准特性,允许网页感知用户在操作系统层面开启的「减少动画」偏好设置,用于为运动敏感用户提供静态或极简替代方案,是Web无障碍的基本要求

时间轴 (近 90 天)

10月15日

正确的减少动画降级应是完全移除动画、跳转到终态,或使用静态替代图,而非简单地animation-play-state: paused

待验证50%
10月15日

prefers-reduced-motion是CSS媒体查询中的一项用户偏好设置,当用户在操作系统层面开启减少动态效果后,浏览器会向页面暴露该标志

待验证50%
10月15日

常见的错误降级做法是冻结当前帧(animation-play-state: paused),导致画面停在旋转中途、缩放一半或淡入半透明的中间态,对运动敏感用户更易引发不适

待验证50%
10月13日

开发者应通过 @media (prefers-reduced-motion: reduce) 为依赖复杂过渡效果的开场信封动画提供静态或极简替代方案,并确保信件正文无需等待动画结束即可读取。

待验证50%
10月13日

前庭功能障碍、偏头痛或对运动敏感的用户会启用操作系统层面的「减少动画」设置,以避免视差滚动、大幅位移或持续动画引发不适。

待验证50%
9月28日

scroll-behavior已在各大浏览器稳定支持超过四年,prefers-reduced-motion在所有主流浏览器全面支持

待验证50%
9月28日

平滑滚动应使用@media (prefers-reduced-motion)包裹,以照顾前庭功能敏感用户,关闭动画后scroll-margin定位效果依然保留

待验证50%
9月14日

WCAG 2.1标准的Success Criterion 2.3.3要求网站遵守「减少动态效果」准则,并尊重prefers-reduced-motion偏好设置

待验证50%

全部知识事实 (8)

来源文章