Back to Details

medium-300-500ms

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Medium Animations (300-500ms)

中等时长动画（300-500ms）

The 300-500ms range is standard animation territory. Long enough to be watched, short enough to not impede flow. The workhorse duration for meaningful motion.
300-500ms的时长范围是标准动画的核心领域。这个时长足够让用户注意到动画，又不会过长影响操作流程，是实现有意义动效的主力时长。

Disney Principles at Medium Duration

中等时长动画中的迪士尼动画原则

All 12 Principles Applicable

全部12项原则均适用

Squash & Stretch: Full expression - visible deformation for bouncing, elastic elements. 15-25% stretch feels natural.
Anticipation: Clear preparation - 80-120ms anticipation before main action. Pull back before push forward.
Staging: Multi-element choreography possible - primary action leads, supporting elements follow.
Straight Ahead/Pose to Pose: Pose to pose recommended - define key positions, let easing handle in-betweens.
Follow Through: Essential - overlapping action where parts settle at different rates.
Slow In/Slow Out: Critical for naturalism - both directions need proper easing.
Arcs: Natural motion paths - elements should travel on curves matching real physics.
Secondary Action: Multiple secondary actions - hair follows head, shadow follows object.
Timing: 18-30 frames at 60fps. Enough frames for nuanced motion.
Exaggeration: Full range available - match to brand personality and context.
Solid Drawing: Complex transforms work - 3D rotations, perspective shifts.
Appeal: Character-defining animations - this is where brand personality lives.
挤压与拉伸（Squash & Stretch）：完整呈现效果——为弹跳、弹性元素添加可见的变形效果。15-25%的拉伸比例会显得自然。
预备动作（Anticipation）：清晰的准备阶段——在主动作前设置80-120ms的预备动画。比如在向前推动前先向后拉动。
布局（Staging）：支持多元素编排——主动作先行，辅助元素随后跟进。
逐帧绘制/关键帧绘制（Straight Ahead/Pose to Pose）：推荐使用关键帧绘制法——先定义关键位置，再通过缓动效果处理中间帧。
跟随动作（Follow Through）：必不可少——实现重叠动作，让不同部件以不同速率完成归位。
慢入慢出（Slow In/Slow Out）：是实现自然动效的关键——动画的开始和结束阶段都需要合适的缓动效果。
弧线运动（Arcs）：符合物理规律的运动路径——元素的运动轨迹应遵循真实物理的曲线。
次要动作（Secondary Action）：支持多个次要动作——比如头发跟随头部运动，阴影跟随物体移动。
时间节奏（Timing）：在60fps下对应18-30帧。足够的帧数可以实现细腻的动效。
夸张表现（Exaggeration）：可充分发挥——根据品牌个性和场景调整夸张程度。
扎实造型（Solid Drawing）：支持复杂变换——3D旋转、视角转换等效果都能实现。
吸引力（Appeal）：塑造角色特质的动画——这是品牌个性的体现之处。

Easing Recommendations

缓动效果推荐

css
/* Smooth, natural motion */
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);

/* Expressive entrance */
transition: all 450ms cubic-bezier(0.16, 1, 0.3, 1);

/* Bouncy, playful */
transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

/* Dramatic deceleration */
transition: all 350ms cubic-bezier(0, 0.55, 0.45, 1);
css
/* Smooth, natural motion */
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);

/* Expressive entrance */
transition: all 450ms cubic-bezier(0.16, 1, 0.3, 1);

/* Bouncy, playful */
transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

/* Dramatic deceleration */
transition: all 350ms cubic-bezier(0, 0.55, 0.45, 1);

Best Use Cases

最佳使用场景

  • Page/view transitions
  • Complex modal sequences
  • Animated illustrations
  • Data visualization changes
  • Onboarding animations
  • Feature reveals
  • State machine transitions
  • Loading completion celebrations
  • 页面/视图过渡
  • 复杂模态框序列动画
  • 动画插图
  • 数据可视化变更动效
  • 引导页动画
  • 功能揭示动画
  • 状态机过渡动画
  • 加载完成庆祝动画

Implementation Pattern

实现模式示例

css
.page-enter {
  opacity: 0;
  transform: translateX(30px);
}

.page-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 350ms ease-out,
              transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Staggered children */
.list-item {
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.list-item:nth-child(1) { transition-delay: 0ms; }
.list-item:nth-child(2) { transition-delay: 50ms; }
.list-item:nth-child(3) { transition-delay: 100ms; }
css
.page-enter {
  opacity: 0;
  transform: translateX(30px);
}

.page-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 350ms ease-out,
              transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Staggered children */
.list-item {
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.list-item:nth-child(1) { transition-delay: 0ms; }
.list-item:nth-child(2) { transition-delay: 50ms; }
.list-item:nth-child(3) { transition-delay: 100ms; }

Key Insight

核心要点

Medium duration is where animation becomes storytelling. Users watch, understand, and remember these animations. Invest in polish here - it defines perceived quality.
中等时长的动画是叙事型动效的核心。用户会留意、理解并记住这些动画。在这部分投入精力打磨——它直接决定了产品的感知品质。