用户偏好与可访问性

动画必须能被暂停、缩短或移除。prefers-reduced-motion: reduce 表示用户希望减少非必要动态，但不意味着所有状态变化都必须消失；仍应保留焦点、成功、错误和空间关系等必要信息。

.panel { transition: transform 180ms ease, opacity 180ms ease; }

@media (prefers-reduced-motion: reduce) {
  .panel { transition-duration: .01ms; animation-duration: .01ms; }
}

减少动态规则应覆盖关键帧、过渡、自动滚动和闪烁。内容不能依赖动画结束才出现，用户也不能被不可取消的循环动画困住。闪烁频率、对比度、焦点可见性和键盘操作需要与动画一起检查。

实验与练习

在操作系统或浏览器中开启减少动态偏好，分别测试展开面板、加载指示、焦点和错误提示。确保动画缩短后内容仍然出现、状态仍然可辨认、键盘仍能完成操作；记录哪些动态是装饰，哪些是信息。

可运行微实验：区分状态、时间线与合成

为同一元素分别添加 transition、keyframes 和 transform。记录触发条件、持续时间、动画是否可逆、是否影响布局；打开 Performance 面板观察只改 transform 与同时改 width/top 的差异，并在 prefers-reduced-motion: reduce 下验证降级。

常见错误

• 把 reduce 当作删除所有反馈。
• 只覆盖 transition，忘记 keyframes 和脚本滚动。
• 让重要文本在动画完成前不可见。
• 忽略闪烁和焦点对用户的影响。

本章回顾

本章现在可以从状态过渡、关键帧、空间变换、缓动和渲染成本一路走到用户偏好。下一章进入 BFC 与层叠上下文，解释布局隔离和绘制顺序。

进入第六章：BFC 与层叠上下文

练习

1. 用最小输入复现“用户偏好与可访问性”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案