Back to Details

large-500-800ms

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Large Animations (500-800ms)

大型动画（500-800ms）

At 500-800ms, animations become events. Users stop and watch. Reserve this duration for significant moments that deserve attention and communicate importance.
当动画时长在500-800ms时，动画会成为核心视觉事件。用户会停下来关注。请将此时长留给那些值得关注、具备重要传达意义的关键场景。

Disney Principles at Large Scale

大规模动画中的迪士尼动画原则

Full Expression of All Principles

所有原则的完整表达

Squash & Stretch: Dramatic deformation - 20-30% stretch visible and characterful. Objects feel elastic and alive.
Anticipation: Extended wind-up - 150-200ms anticipation sells the action. Clear "about to happen" signal.
Staging: Sophisticated choreography - multiple elements with clear hierarchy and timing offsets.
Straight Ahead/Pose to Pose: Definitely pose to pose - complex motion needs keyframe control.
Follow Through: Extended settling - elements continue moving 100-200ms after main action completes.
Slow In/Slow Out: Dramatic easing - strong deceleration creates impact at endpoints.
Arcs: Essential - all movement should follow natural curved paths.
Secondary Action: Rich layering - primary, secondary, and tertiary actions possible.
Timing: 30-48 frames at 60fps. Full cinematic range.
Exaggeration: Go bold - this duration supports theatrical expression.
Solid Drawing: Full 3D transforms - depth, perspective, complex rotations.
Appeal: Memorable moments - users will recall these animations.
Squash & Stretch（挤压与拉伸）：夸张的变形效果——呈现20-30%的拉伸幅度，赋予角色感。让物体富有弹性和生命力。
Anticipation（预备动作）：延长的蓄力阶段——150-200ms的预备动作能强化动作的说服力。传递清晰的“即将发生”信号。
Staging（场景布局）：精细的编排设计——多个元素之间有明确的层级和时间差。
Straight Ahead/Pose to Pose（逐帧动画/关键帧动画）：优先使用关键帧动画——复杂运动需要关键帧的精准控制。
Follow Through（跟随动作）：延长的收尾阶段——主动作完成后，元素继续运动100-200ms。
Slow In/Slow Out（缓入缓出）：夸张的缓动效果——强烈的减速能在动作端点制造冲击力。
Arcs（弧线运动）：必不可少——所有运动都应遵循自然的曲线轨迹。
Secondary Action（次要动作）：丰富的层次设计——可包含主要、次要及三级动作。
Timing（时间控制）：60fps下为30-48帧。具备完整的电影级表现范围。
Exaggeration（夸张效果）：大胆表现——此时长支持戏剧化的表达。
Solid Drawing（扎实的造型）：完整的3D变换——包含深度、透视、复杂旋转效果。
Appeal（吸引力）：打造难忘的瞬间——用户会记住这些动画。

Easing Recommendations

缓动函数推荐

css
/* Dramatic entrance */
transition: all 600ms cubic-bezier(0.16, 1, 0.3, 1);

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

/* Elastic landing */
transition: transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

/* Smooth, cinematic */
transition: all 800ms cubic-bezier(0.25, 0.1, 0.25, 1);
css
/* Dramatic entrance */
transition: all 600ms cubic-bezier(0.16, 1, 0.3, 1);

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

/* Elastic landing */
transition: transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

/* Smooth, cinematic */
transition: all 800ms cubic-bezier(0.25, 0.1, 0.25, 1);

Best Use Cases

最佳适用场景

  • Hero image/section reveals
  • Major feature introductions
  • Success/completion celebrations
  • Onboarding sequences
  • Dashboard data loads
  • Portfolio piece reveals
  • First-time user experiences
  • Important state changes
  • Hero图片/区域展示
  • 主要功能介绍
  • 成功/完成状态的庆祝动画
  • 新用户引导流程
  • 仪表盘数据加载动画
  • 作品集内容展示
  • 首次用户体验
  • 重要状态变更

Implementation Pattern

实现模式

css
.hero-reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.9);
  transition: opacity 500ms ease-out,
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered reveal with follow-through */
.hero-title { transition-delay: 0ms; }
.hero-subtitle { transition-delay: 100ms; }
.hero-cta { transition-delay: 200ms; }
css
.hero-reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.9);
  transition: opacity 500ms ease-out,
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered reveal with follow-through */
.hero-title { transition-delay: 0ms; }
.hero-subtitle { transition-delay: 100ms; }
.hero-cta { transition-delay: 200ms; }

Warning Signs

注意事项

  • If users seem impatient, duration is too long
  • If used for common actions, flow suffers
  • If multiple large animations compete, staging fails
  • 如果用户表现出不耐烦，说明时长远大于合理范围
  • 如果用于常规操作，会影响使用流程的流畅性
  • 如果多个大型动画同时进行，会破坏场景布局的逻辑性

Key Insight

核心要点

Large animations are moments of theater. They punctuate the experience and create memory. Use sparingly - every large animation should earn its duration.
大型动画是体验中的戏剧化时刻。它们能强化体验记忆点，成为体验的亮点。请谨慎使用——每一个大型动画都应“物有所值”，值得占用用户的时间。