instant-0-100ms

即时动画（0-100ms）

低于 100ms 的动画会让用户感觉瞬间完成。这种时长适用于提供即时反馈，让用户确认操作已完成，而不会感到延迟。

迪士尼动画原则的即时应用

适用原则

挤压与拉伸：轻微处理——按下按钮时压缩 2-5%，营造触感，但不会出现明显变形。

预备动作：完全省略——这种速度下没有时间做准备。

演出布局：尽量简洁——依靠位置或颜色变化，而不是移动。

连续动作与关键帧动作：仅使用连续动作——速度太快，无法处理复杂的关键帧。

跟随动作与重叠动作：不使用——动作完成时，跟随动作还来不及显现。

缓入缓出：仅使用 ease-out——以全速开始，随后略微减速。

弧线运动：仅使用直线路径——这种速度下，曲线难以察觉。

次要动作：省略——大脑无法处理多个同时发生的即时变化。

时间安排：最多 1-3 帧。60fps = 每帧 16.67ms。

夸张：尽量克制——仅做细微的缩放（0.95-1.05）或不透明度变化。

实体绘制：着重表现颜色或不透明度变化，而非空间变形。

吸引力：清晰、即时的响应能建立信任，并提升用户对性能的感知。

不适用的原则

• 复杂的多步骤序列
• 明显的移动距离
• 超过 15 度的旋转
• 同时更改多个属性
• 分阶段显示内容

缓动建议

/* Primary choice - immediate start, soft landing */
transition: all 50ms ease-out;

/* Alternative - completely linear for state toggles */
transition: opacity 80ms linear;

/* Button press feedback */
transition: transform 50ms ease-out;

最佳适用场景

• 按钮激活/按下状态
• 切换开关
• 复选框/单选框选择
• 焦点环显示
• 悬停颜色变化
• 触摸波纹效果的启动

实现模式

.button:active {
  transform: scale(0.97);
  transition: transform 50ms ease-out;
}

.toggle-on {
  background: var(--active);
  transition: background 80ms ease-out;
}

核心见解

在即时速度下，动画的作用是确认，而非传达。用户不应有意识地察觉到动画，而应感受到界面正在响应。