motion-sickness

预防晕动症

安全地运用 Disney 的原则，消除前庭刺激因素。

问题迹象

• 用户报告头晕或恶心
• 导航时迷失方向
• 用户避开某些功能
• 屏幕越大，投诉越多
• 视差或缩放效果引发问题

危险模式

这些模式会引发前庭反应：

• 大幅缩放动画
• 视差滚动（尤其是多层视差）
• 全屏旋转
• 快速改变方向
• 持续循环的背景动效
• 滚动劫持

按原则诊断

夸张

问题：动作过于夸张
修复：缩小变换幅度。尺寸变化最多为 10%–20%。避免全屏缩放。

弧形运动

问题：曲线路径会增加视觉追踪负担
修复：功能性 UI 使用直线运动。弧形运动仅用于小型、可选的元素。

跟随与重叠

问题：过冲会产生甩动感
修复：移除导航中的弹跳和过冲。使用临界阻尼弹簧或缓出效果。

次要动作

问题：多个元素同时运动会造成混乱
修复：将主要动作限制为一个。移除视差层。

缓入与缓出

问题：加速模式会导致迷失方向
修复：使用一致、可预测的缓动效果。避免速度突然变化。

快速修复

1. 遵循 prefers-reduced-motion——这是硬性要求
2. 移除视差效果——常见诱因
3. 避免缩放转场——改用淡入淡出
4. 保持动作幅度小——移动距离不超过 100px
5. 不要劫持滚动——让滚动保持其本来的行为

故障排查清单

• 动画是否遵循 prefers-reduced-motion？
• 是否有元素移动超过 100px？
• 是否存在缩放效果？
• 是否存在视差？请移除。
• 是否存在持续循环的动画？
• 用户能否暂停或禁用动效？
• 在大屏幕上测试（动效会被放大）
• 连续测试 5 分钟以上

安全替代方案

触发效果	安全替代方案
缩放转场	淡入淡出 + 轻微缩放（最多 5%）
视差滚动	静态效果或单层效果
旋转	淡入淡出或滑动
弹跳/弹簧效果	缓出（无过冲）
整页滑动	交叉淡入淡出

代码模式

@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;
  }
}

/* Safe default motion */
.safe-transition {
  transition: opacity 200ms ease-out;
  /* Avoid: transform with large values */
}