large-500-800ms

大型动画（500-800ms）

达到 500-800ms 时，动画就成了事件。用户会停下来观看。请将此时长留给值得关注、能够传达重要性的重大时刻。

大型动画中的迪士尼原则

全面体现所有原则

挤压与拉伸：明显的形变——20-30% 的拉伸，既醒目又生动。物体呈现出弹性和生命力。

预备动作：延长蓄势过程——150-200ms 的预备动作能让后续动作更可信。清晰传达“即将发生”的信号。

演出布局：精心编排动作——多个元素之间有明确的层级和时间偏移。

连续动作与关键姿势：一定要采用关键姿势法——复杂运动需要关键帧控制。

跟随与重叠动作：延长收尾过程——主要动作结束后，元素还会继续运动 100-200ms。

缓入缓出：采用戏剧性的缓动——强烈的减速能让动作在终点更有冲击力。

弧形运动：必不可少——所有运动都应遵循自然的曲线路径。

次要动作：丰富的层次——可以加入主要、次要和第三层动作。

时间控制：在 60fps 下为 30-48 帧，涵盖完整的电影级表现范围。

夸张：大胆表现——这种时长足以支撑戏剧化的表达。

扎实绘图：完整的 3D 变换——包括深度、透视和复杂旋转。

吸引力：创造难忘时刻——用户会记住这些动画。

缓动建议

/* 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);

最佳使用场景

• Hero 图片／区块的展示
• 重大功能的引入
• 成功／完成时的庆祝效果
• 新手引导流程
• 仪表盘数据加载
• 作品集项目的展示
• 首次使用体验
• 重要状态变化

实现模式

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

警示信号

• 如果用户显得不耐烦，说明时长过长
• 如果用于常见操作，会影响使用流畅度
• 如果多个大型动画相互争夺注意力，说明演出布局不当

关键要点

大型动画是戏剧性时刻。它们为体验画龙点睛，并让人留下印象。请谨慎使用——每个大型动画都应值得占用这么长时间。