small-200-300ms

小型过渡（200-300ms）

在 200-300ms 的时长下，用户会有意识地感知运动。这个时长衔接了微交互和完整动画，非常适合 UI 状态变化。

短时动画中的迪士尼原则

适用的原则

挤压与拉伸：效果明显但克制——活泼的界面使用 10-15%，专业界面使用 5%。

预备动作：短暂的蓄势有效——40-60ms 的准备时间能强化 200ms 的主要动作。

演出布局：层次清晰——主要元素先动，次要元素延后 50-100ms。

直线动作与姿势到姿势：优先选择姿势到姿势——关键帧能打造精致的运动效果。

跟随与重叠动作：明显的过冲——超出目标 5-10% 能增添活力。

慢入慢出：使用完整的缓动曲线——缓入缓出和自定义贝塞尔曲线都能发挥出色效果。

弧线运动：自然的曲线能提升效果——元素可以沿弧线而非直线移动。

次要动作：加入一到两个次要动作——淡入 + 缩放、移动 + 旋转。

时间控制：在 60fps 下为 12-18 帧。动作流畅且沉稳。

夸张：程度适中到明显——取决于品牌个性。

扎实绘图：充分组合变换——同时进行平移、缩放和旋转。

吸引力：有意识地运用动画，塑造品牌个性。

不适用的情况

• 感觉像瞬间完成（太慢）
• 复杂的角色动画
• 长距离移动
• 多个连续阶段

缓动建议

/* Standard smooth transition */
transition: all 250ms ease-out;

/* Modal/card appearance - confident arrival */
transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);

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

/* Professional, subtle */
transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);

最适用场景

• 模态对话框出现
• 卡片展开/折叠
• 导航抽屉滑入
• 标签页内容过渡
• 筛选面板切换
• 图片缩略图展开
• 警报/通知滑入

实现模式

.modal {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 200ms ease-out,
              transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.modal.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.card-expand {
  transition: all 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

核心要点

用户会看到并理解小型过渡。用户会跟踪动作，大脑也会处理空间关系。利用这一点引导注意力并传达层级。