medium-300-500ms

中时长动画（300-500ms）

300-500ms 是标准动画时长范围。足够长，能让人看清；又足够短，不会妨碍流程。这是承载重要动态效果的主力时长。

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

12 项原则均适用

挤压与拉伸：充分展现效果——让弹跳元素和弹性元素产生明显变形。15-25% 的拉伸看起来很自然。

预备动作：清晰的准备动作——在主要动作前加入 80-120ms 的预备时间。先向后蓄势，再向前推进。

演出布局：可进行多元素编排——主要动作先行，辅助元素随后跟上。

连续动作与关键姿势：建议采用关键姿势法——定义关键位置，再通过缓动处理中间帧。

跟随动作与重叠动作：必不可少——不同部分以不同速度逐渐稳定。

慢入与慢出：实现自然效果的关键——进场和退场都需要恰当的缓动。

弧形运动：采用自然的运动路径——元素应沿符合真实物理规律的曲线移动。

次要动作：可加入多个次要动作——头发跟随头部，阴影跟随物体。

时间节奏：在 60fps 下为 18-30 帧。帧数足以表现细腻的动态效果。

夸张：可充分运用——根据品牌个性和具体情境调整。

扎实绘图：可进行复杂变换——包括 3D 旋转和透视变化。

吸引力：塑造角色特征的动画——品牌个性就在这里展现。

缓动建议

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

最佳使用场景

• 页面／视图过渡
• 复杂的模态框序列
• 动画插画
• 数据可视化变化
• 引导动画
• 功能展示
• 状态机过渡
• 加载完成庆祝动画

实现模式

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

关键见解

中等时长是动画开始讲述故事的阶段。用户会观看、理解并记住这些动画。在此投入精细打磨——它决定了用户感知到的品质。