当动画引发头晕、恶心、迷失方向或前庭不适时…

适用于网页或应用动画导致用户前庭不适、眩晕或迷失方向，需要按无障碍标准降级动效和替换危险动画的场景。

适用场景

解决思路

1. 排查问题指标：用户报告头晕或恶心、导航时迷失方向、用户避开某些功能、大屏投诉增加、视差或缩放效果引起问题。
2. 避免或移除大范围缩放动画。
3. 避免或移除视差滚动，尤其是多层视差。
4. 避免或移除全屏旋转。
5. 避免或移除快速方向变化。
6. 避免或移除连续/循环背景运动。
7. 避免或移除 scroll-jacking。
8. Exaggeration：减少 transform 规模，尺寸变化最大 10-20%，避免全屏缩放。
9. Arcs：功能性 UI 使用线性运动，弧线仅保留给小型、可选元素。
10. Follow Through：移除导航中的回弹/过冲，使用临界阻尼弹簧或 ease-out。
11. Secondary Action：限制为一个主动效，移除视差层。
12. Slow In and Slow Out：使用一致、可预测的缓动，避免突然速度变化。
13. 尊重 prefers-reduced-motion，这是不可妥协的。
14. 移除视差效果，它是常见触发源。
15. 避免缩放过渡，改用淡入淡出。
16. 保持运动幅度小，移动小于 100px。
17. 不做 scroll-jacking，让滚动保持滚动。
18. 检查动画是否尊重 prefers-reduced-motion。
19. 检查是否有任何元素移动超过 100px。
20. 检查是否存在任何缩放效果。
21. 检查是否存在视差；如有则移除。
22. 检查是否有连续/循环动画。
23. 检查用户能否暂停或禁用动效。
24. 在大显示器上测试，因为动效会被放大。
25. 连续测试 5+ 分钟。
26. 缩放过渡的安全替代：淡入淡出 + 轻微缩放（最大 5%）。
27. 视差滚动的安全替代：静态或单层。
28. 旋转的安全替代：淡入淡出或滑动。
29. 回弹/弹簧的安全替代：ease-out（无过冲）。
30. 全页滑动的安全替代：交叉淡入淡出。
31. 在 CSS 中添加 @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .parallax { transform: none !important; } }。
32. 为安全默认动效使用 .safe-transition { transition: opacity 200ms ease-out; }，避免使用大数值的 transform。

适用边界 · 注意事项

• 当页面或应用没有动画，或无法控制动画实现时，不适用。
• 当眩晕或迷失方向不是由动画的前庭触发引起，而是由性能卡顿、对比度、布局或其他可访问性问题引起时，不适用。
• 当品牌或产品必须保留大幅动效，且无法提供 reduced-motion 降级、暂停或禁用选项时，不能仅靠此技能解决，需先处理可访问性冲突。