先记住这个答案
prefers-reduced-motion: reduce 是减少非必要运动的请求,不是“删除一切状态反馈”的命令。对持续平移、缩放或视差效果,应提供静态或更平缓的路径;对加载完成、展开收起等交互,仍需保留可辨认的状态变化。CSS 动画和脚本动画若只处理一边,用户仍会看到另一边的运动。
reduce是用户运动偏好- 优先减少持续位移与视差
- 必要状态反馈仍要保留
- 脚本动画也要响应偏好
视差和轮播怎样减少运动
营销页有背景视差和无限滚动的装饰图形。用户系统设置了减少动态效果后,页面应停止这些运动,但按钮点击后的加载状态仍要能被看见。给关键动画写默认方案,再在媒体查询中减少持续运动;同时检查轮播自动播放和脚本动画,CSS 查询不会自动替你停掉脚本计时器。实际体验还应在操作系统和浏览器模拟中测试。
@media (prefers-reduced-motion: reduce) {
.parallax { transform: none; animation: none; }
.carousel { scroll-behavior: auto; }
.status {
transition-duration: 0.01ms; /* 保留状态变化 */
}
}这一媒体特性查询用户对动态效果的偏好,reduce 不是“设备性能差”的信号。
示例用近乎零时长的过渡,是为了让状态仍能迅速变化,而不是让用户等待长时间滑动。轮播若每几秒自动前进,即使把 CSS 动画关掉,内容仍可能突然更换;应同时停止自动播放或提供暂停控制。检查时在系统里打开减少动态效果,再走完整个交互流程,而不是只看样式表中是否出现了媒体查询。
减少运动不等于删除反馈
它也不指定哪种动画一定安全,具体应看运动的幅度、持续时间和是否受用户控制。大面积移动、闪烁、自动播放常更值得优先处理;必要的过渡可改短或改成非运动提示。CSS 动画可由样式覆盖,Web Animations API、视频和第三方动效还要在各自逻辑里响应偏好。
一个抽屉打开时,完全删除动画仍需让“已打开”状态可感知:焦点应进入抽屉,遮罩和按钮状态也要变化。对视差滚动,直接固定背景或移除位移更可靠;对很短的颜色过渡,则可按实际刺激程度决定是否保留。若动画由 JavaScript 库驱动,CSS 媒体规则无法自动停掉库内的定时器或时间线。
容易答错的地方
- 把减少动态效果当成禁用所有反馈
- 状态改变仍需可感知,可以用文字、颜色或较温和的过渡提示。
- 只处理 CSS
animation - 脚本、视频和自动滚动也可能制造运动,应一起审查。
面试官还会怎么问?
怎样在 JavaScript 中读取偏好?
用 matchMedia 查询该媒体特性,并监听变化;脚本驱动的动画据此停止或改为简化版。
reduce 是否意味着所有过渡都必须设为零?
不是。目标是减少可能造成不适的运动,同时保留必要的状态反馈。
浏览器模拟通过就算完成了吗?
还要用键盘和真实设备检查自动播放、滚动及第三方动效。
参考资料
示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。