Back to Details

slow-800-1200ms

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Slow Animations (800-1200ms)

慢动画（800-1200ms）

At 800-1200ms, animation approaches cinematic territory. This is deliberate, intentional motion for moments that matter. Users are expected to stop and watch.
在800-1200ms这个区间，动画接近电影级表现力。这是为关键时刻设计的刻意、有目的性的动效，旨在让用户停下来观看。

Disney Principles at Slow Speed

迪士尼动画原则在慢速动效中的应用

Cinematic Application

电影化应用

Squash & Stretch: Pronounced and characterful - 25-35% deformation tells stories. Objects have weight and personality.
Anticipation: Full theatrical wind-up - 200-300ms preparation. The audience knows something is coming.
Staging: Scene composition - think in terms of camera and stage. Clear visual hierarchy with entrance order.
Straight Ahead/Pose to Pose: Pose to pose essential - 4-6 key poses for 1 second of motion.
Follow Through: Extended overlap - different elements settle at clearly different times, 200-300ms of settling.
Slow In/Slow Out: Dramatic curves - strong ease-in creates weight, strong ease-out creates impact.
Arcs: Sweeping curves - motion paths are clearly curved, visible trajectories.
Secondary Action: Complex layering - multiple levels of supporting action enhance primary motion.
Timing: 48-72 frames at 60fps. Near-film quality frame counts.
Exaggeration: Theatrical - push proportions and motion for emotional impact.
Solid Drawing: Full dimensional transforms - parallax, depth, 3D rotation.
Appeal: Emotional connection - slow motion creates intimacy with the interface.
Squash & Stretch（挤压与拉伸）：夸张且富有个性——25-35%的形变可以传递故事感，让物体拥有重量和性格。
Anticipation（预备动作）：完整的戏剧化铺垫——200-300ms的准备阶段，让用户预知即将发生的内容。
Staging（舞台布局）：场景构图——以镜头和舞台的视角思考，通过出场顺序构建清晰的视觉层级。
Straight Ahead/Pose to Pose（逐帧绘制/关键帧绘制）：关键帧绘制至关重要——1秒的动效需要4-6个关键姿势。
Follow Through（跟随动作）：延长的重叠效果——不同元素在明显不同的时间点完成归位，归位过程持续200-300ms。
Slow In/Slow Out（缓入缓出）：戏剧性曲线——强烈的缓入效果赋予重量感，强烈的缓出效果增强冲击力。
Arcs（弧线运动）：流畅的曲线——运动路径呈现清晰的弧线，轨迹可见。
Secondary Action（次要动作）：复杂的分层设计——多层辅助动效强化主要动作的表现力。
Timing（时间控制）：60fps下为48-72帧，接近电影级的帧数标准。
Exaggeration（夸张）：戏剧化表现——放大比例和动效以传递情感冲击。
Solid Drawing（扎实的造型）：全维度变换——视差、深度、3D旋转效果。
Appeal（吸引力）：情感联结——慢速动效能让用户与界面建立亲密感。

Easing Recommendations

缓动函数推荐

css
/* Dramatic, weighted motion */
transition: all 1000ms cubic-bezier(0.16, 1, 0.3, 1);

/* Graceful entrance */
transition: all 900ms cubic-bezier(0.22, 1, 0.36, 1);

/* Heavy, impactful landing */
transition: transform 1100ms cubic-bezier(0.33, 1, 0.68, 1);

/* Elastic, memorable */
transition: all 1000ms cubic-bezier(0.68, -0.6, 0.32, 1.6);
css
/* Dramatic, weighted motion */
transition: all 1000ms cubic-bezier(0.16, 1, 0.3, 1);

/* Graceful entrance */
transition: all 900ms cubic-bezier(0.22, 1, 0.36, 1);

/* Heavy, impactful landing */
transition: transform 1100ms cubic-bezier(0.33, 1, 0.68, 1);

/* Elastic, memorable */
transition: all 1000ms cubic-bezier(0.68, -0.6, 0.32, 1.6);

Best Use Cases

最佳适用场景

  • App launch sequences
  • Major feature reveals
  • Storytelling moments
  • Error recovery animations
  • Achievement unlocks
  • Tutorial sequences
  • First-run experiences
  • Section transitions in presentations
  • Loading state to content reveals
  • 应用启动流程
  • 核心功能展示
  • 叙事类动效时刻
  • 错误恢复动画
  • 成就解锁动效
  • 教程引导流程
  • 首次使用体验
  • 演示文稿中的章节过渡
  • 从加载状态到内容展示的过渡

Implementation Pattern

实现模式

css
@keyframes slowReveal {
  0% {
    opacity: 0;
    transform: translateY(100px) scale(0.8);
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.slow-reveal {
  animation: slowReveal 1000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered sequence */
.sequence-item {
  animation: slowReveal 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sequence-item:nth-child(n) {
  animation-delay: calc(var(--index) * 150ms);
}
css
@keyframes slowReveal {
  0% {
    opacity: 0;
    transform: translateY(100px) scale(0.8);
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.slow-reveal {
  animation: slowReveal 1000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered sequence */
.sequence-item {
  animation: slowReveal 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sequence-item:nth-child(n) {
  animation-delay: calc(var(--index) * 150ms);
}

When NOT to Use

不适用场景

  • Navigation between views (too slow)
  • Repeated interactions (users get impatient)
  • High-frequency actions
  • Data-heavy interfaces
  • Productivity tools
  • 视图间导航（速度过慢）
  • 重复交互场景（用户会失去耐心）
  • 高频操作
  • 数据密集型界面
  • 生产力工具

Key Insight

核心见解

Slow animations demand attention as payment. Only use when the moment is worth the user's time. These animations create memories, not just feedback.
慢动画需要用户投入注意力作为成本。仅当该时刻值得用户花费时间时才使用这类动效。它们不仅提供反馈，更能让用户留下深刻记忆。