Back to Details

motion-sickness

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Motion Sickness Prevention

晕动症预防

Eliminate vestibular triggers using Disney's principles safely.
遵循迪士尼动画原则，安全消除前庭触发因素。

Problem Indicators

问题表现

  • Users report dizziness or nausea
  • Disorientation during navigation
  • Users avoid certain features
  • Complaints increase with larger screens
  • Parallax or zoom effects cause issues
  • 用户反馈头晕或恶心
  • 导航过程中出现方向迷失
  • 用户避开某些功能
  • 屏幕越大，投诉越多
  • 视差或缩放效果引发不适

Dangerous Patterns

危险动效模式

These trigger vestibular responses:
  • Large-scale zoom animations
  • Parallax scrolling (especially multi-layer)
  • Full-screen rotations
  • Rapid direction changes
  • Continuous/looping background motion
  • Scroll-jacking
以下动效会触发前庭反应：
  • 大规模缩放动画
  • 视差滚动（尤其是多层视差）
  • 全屏旋转
  • 快速方向切换
  • 持续/循环背景动效
  • 滚动劫持（Scroll-jacking）

Diagnosis by Principle

基于动画原则的诊断与修复

Exaggeration

夸张（Exaggeration）

Issue: Over-dramatic motion Fix: Reduce scale of transforms. Max 10-20% size change. Avoid full-screen zooms.
问题：过度夸张的动效 修复：缩小变换比例，尺寸变化最大控制在10-20%，避免全屏缩放。

Arcs

弧线运动（Arcs）

Issue: Curved paths cause tracking strain Fix: Use linear motion for functional UI. Save arcs for small, optional elements only.
问题：曲线路径导致视觉追踪疲劳 修复：功能性UI使用线性运动，仅在小型可选元素上使用弧线运动。

Follow Through

跟随动作（Follow Through）

Issue: Overshooting creates whiplash effect Fix: Remove bounce/overshoot from navigation. Use critically damped springs or ease-out.
问题：过度回弹引发类似甩鞭的不适 修复：移除导航动效中的弹跳/过度回弹，使用临界阻尼弹簧或缓出（ease-out）效果。

Secondary Action

次要动作（Secondary Action）

Issue: Multiple moving elements cause confusion Fix: Limit to one primary motion. Remove parallax layers.
问题：多个元素同时运动造成混乱 修复：仅保留一个主要动效，移除视差图层。

Slow In and Slow Out

缓入缓出（Slow In and Slow Out）

Issue: Acceleration patterns cause disorientation Fix: Use consistent, predictable easing. Avoid sudden speed changes.
问题：加速度变化模式引发方向迷失 修复：使用一致、可预测的缓动效果，避免突然的速度变化。

Quick Fixes

快速修复方案

  1. Respect 
    prefers-reduced-motion
     - Non-negotiable
  2. Remove parallax effects - Common trigger
  3. Avoid zoom transitions - Use fades instead
  4. Keep motion small - Under 100px movement
  5. No scroll-jacking - Let scroll be scroll
  1. 尊重
    prefers-reduced-motion
    设置     - 不可妥协
  2. 移除视差效果 - 常见触发因素
  3. 避免缩放过渡 - 改用淡入淡出效果
  4. 控制动效幅度 - 移动距离不超过100px
  5. 禁止滚动劫持 - 保持原生滚动行为

Troubleshooting Checklist

故障排查清单

  • Does animation respect 
    prefers-reduced-motion
    ?
  • Is any element moving more than 100px?
  • Are there any zoom effects?
  • Is parallax present? Remove it.
  • Are there continuous/looping animations?
  • Can users pause or disable motion?
  • Test on large display (motion amplified)
  • Test for 5+ minutes continuously
  • 动效是否尊重
    prefers-reduced-motion
    设置？
  • 是否有元素移动距离超过100px？
  • 是否存在缩放效果？
  • 是否有视差效果？如有请移除。
  • 是否存在持续/循环动画？
  • 用户能否暂停或禁用动效？
  • 在大尺寸显示器上测试（动效影响会被放大）
  • 连续测试5分钟以上

Safe Alternatives

安全替代方案

TriggeringSafe Alternative
Zoom transitionFade + slight scale (max 5%)
Parallax scrollStatic or single-layer
RotationFade or slide
Bounce/springEase-out (no overshoot)
Full-page slideCrossfade
触发不适的动效安全替代方案
缩放过渡淡入淡出+轻微缩放（最大5%）
视差滚动静态或单层滚动
旋转淡入淡出或滑动
弹跳/弹簧效果缓出效果（无过度回弹）
整页滑动交叉淡入淡出

Code Pattern

代码示例

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

/* Safe default motion */
.safe-transition {
  transition: opacity 200ms ease-out;
  /* Avoid: transform with large values */
}
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;
  }
}

/* 安全默认动效 */
.safe-transition {
  transition: opacity 200ms ease-out;
  /* 避免：使用大值的transform属性 */
}