交互触发的动画

要求内容

由用户交互触发的运动动画——视差滚动、页面过渡、悬停缩放、滚动驱动的渐现效果——必须在用户请求减少运动时予以禁用，除非该动画对所传达的功能或信息而言是必不可少的。

标准机制是 CSS 的 prefers-reduced-motion: reduce 媒体查询，该查询映射了 macOS、Windows、iOS 和 Android 均提供的操作系统级”减少动态效果”设置。

如何满足

• 将任何有意义的运动效果（变换、大幅位移、视差、页面过渡、滚动关联动画）包裹在 @media (prefers-reduced-motion: no-preference) 中。
• 对于 JavaScript 驱动的动画（GSAP、Framer Motion、Lottie），检查 window.matchMedia('(prefers-reduced-motion: reduce)').matches，并跳过动画或以即时状态切换替代。
• 允许关键反馈动画（加载旋转图标、拖拽预览）在启用减少运动时以更低幅度继续运行——它们传达的是功能，而非装饰。
• 在 macOS 系统设置 → 辅助功能 → 显示 → 减少动态效果启用的状态下进行测试，以及 Windows、iOS 和 Android 上的对应设置。

常见失败

• 营销页面的视差滚动忽略操作系统的减少运动偏好设置。
• 页面过渡库（Barba.js、旧版配置中的 Astro view transitions）无视用户偏好，对大幅位移进行动画处理。
• 卡片悬停上浮效果使用较长的 translateY 过渡，令有前庭系统障碍的用户感到不适。
• 长页面上的滚动触发动画，用户滚动时触发数十个运动效果——在规模较大时尤为令人迷失方向。
• 引导流程中的 Lottie 动画在未检查用户偏好的情况下播放全屏运动效果。

axe 和 Lighthouse 不能可靠地标记减少运动相关的失败，但新版 Lighthouse 的无障碍审计中包含 prefers-reduced-motion 检查，许多设计系统检查工具现在也强制执行此项规定。

为何重要

前庭系统障碍——梅尼埃病、前庭偏头痛、脑震荡后综合征、持续性姿势-感知性头晕——可因屏幕上的大幅或突发运动而加重。其结果是真实的身体性恶心或眩晕，而非单纯的不适感。遵从 prefers-reduced-motion 是成本最低、影响最广的无障碍改进措施之一，而操作系统级的设置意味着用户已经告知您他们的需求。