micro-100-200ms

微动画（100-200ms）

100-200ms 是微交互的最佳时长。速度足够快，让人感觉响应灵敏；也足够慢，能让人感知到这是有意设计的动效。

迪士尼原则在微动画中的应用

效果良好

挤压与拉伸：轻度应用——弹性按钮和出现的元素可使用 5-10%。

预备动作：可使用微预备动作——在 150ms 的动作前预留 20-30ms 的蓄势时间。

舞台布局：聚焦单一焦点——一个元素移动，其余元素保持静止。

逐帧动画／关键姿势动画：两种方式均可——动作简单，适合逐帧制作；也足够可控，适合关键姿势制作。

跟随与重叠动作：只需极轻微的过冲——越过目标 2-5%，然后迅速稳定。

慢入慢出：以 ease-out 为主——元素应从容地到达目标位置。

弧线运动：可使用轻微曲线——下拉菜单项可以沿着细微弧线移动，而非垂直直线下落。

次要动作：最多添加一个次要动作——菜单展开时，图标同时旋转。

节奏：在 60fps 下为 6-12 帧，足以呈现流畅动效。

夸张：适度即可——缩放范围为 0.9-1.1，旋转角度不超过 30 度。

扎实的绘图：使用简单变换——缩放、不透明度和短距离位移。

吸引力：快速动画能带来现代、精致的观感。

效果不佳

• 长距离移动
• 复杂的动作编排
• 大量物理模拟
• 多阶段揭示
• 精心设计的复杂预备动作序列

缓动建议

/* Standard micro-interaction */
transition: all 150ms ease-out;

/* Appearing elements - start fast, land soft */
transition: opacity 120ms ease-out, transform 150ms ease-out;

/* Bouncy micro-feedback */
transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);

最适用场景

• 工具提示的出现
• 下拉菜单的展开
• 图标状态变化
• 细微的悬停动画
• 通知徽标
• 标签切换
• 手风琴式面板的标题

实现模式

.tooltip {
  opacity: 0;
  transform: translateY(-4px) scale(0.95);
  transition: opacity 120ms ease-out,
              transform 150ms ease-out;
}

.trigger:hover .tooltip {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.dropdown-item {
  opacity: 0;
  transform: translateY(-8px);
  transition: all 150ms ease-out;
}

核心见解

微动画更多是用来感受，而非观看的。缺少微动画时，用户会注意到；但他们不会有意识地观察它们。精致感正蕴藏于此。