Back to Details

instant-0-100ms

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Instant Animations (0-100ms)

即时动画（0-100ms）

Animations under 100ms feel instantaneous to users. This duration is for immediate feedback that confirms actions without perceived delay.
时长在100ms以内的动画对用户来说会感觉毫无延迟。这个时长适用于无需让用户感知到延迟的即时操作反馈。

Disney Principles at Instant Speed

迪士尼动画原则在即时速度下的应用

Works Well

适用的原则

Squash & Stretch: Subtle - 2-5% compression on button press creates tactile feel without visible deformation.
Anticipation: Skip entirely - no time for preparation at this speed.
Staging: Minimal - rely on position/color change, not movement.
Straight Ahead/Pose to Pose: Straight ahead only - too fast for keyframe complexity.
Follow Through: None - motion completes before follow-through registers.
Slow In/Slow Out: Use 
ease-out
only - starts at full speed, slight deceleration.
Arcs: Linear paths only - curves don't register at this speed.
Secondary Action: Skip - brain can't process multiple simultaneous instant changes.
Timing: 1-3 frames maximum. 60fps = 16.67ms per frame.
Exaggeration: Minimal - subtle scale (0.95-1.05) or opacity changes.
Solid Drawing: Focus on color/opacity shifts, not spatial transformation.
Appeal: Crisp, immediate response builds trust and perceived performance.
挤压与拉伸（Squash & Stretch）：轻微调整——按钮按压时进行2-5%的压缩，在不产生明显变形的前提下营造触感。
预备动作（Anticipation）：完全跳过——在这个速度下没有时间做准备动作。
舞台呈现（Staging）：极简——依靠位置/颜色变化，而非移动效果。
逐帧绘制/关键帧绘制（Straight Ahead/Pose to Pose）：仅使用逐帧绘制——速度太快，无法处理复杂关键帧。
跟随动作（Follow Through）：无需添加——动作完成前，跟随动作用户根本无法感知。
缓入缓出（Slow In/Slow Out）：仅使用
ease-out
——从全速开始，轻微减速收尾。
弧线运动（Arcs）：仅使用线性路径——这个速度下曲线运动无法被用户感知。
次要动作（Secondary Action）：跳过——大脑无法同时处理多个即时变化。
时间节奏（Timing）：最多1-3帧。60fps下每帧为16.67ms。
夸张表现（Exaggeration）：轻微调整——如细微的缩放（0.95-1.05）或透明度变化。
扎实绘制（Solid Drawing）：专注于颜色/透明度变化，而非空间变换。
吸引力（Appeal）：干脆利落的即时响应能建立用户信任，提升感知性能。

Doesn't Work

不适用的做法

  • Complex multi-step sequences
  • Visible travel distance
  • Rotation beyond 15 degrees
  • Multiple property changes
  • Staged reveals
  • 复杂的多步骤序列
  • 明显的移动距离
  • 超过15度的旋转
  • 多个属性同时变化
  • 分阶段展示

Easing Recommendations

缓动效果推荐

css
/* 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;
css
/* 首选方案——即时启动，柔和收尾 */
transition: all 50ms ease-out;

/* 替代方案——状态切换时使用完全线性动画 */
transition: opacity 80ms linear;

/* 按钮按压反馈 */
transition: transform 50ms ease-out;

Best Use Cases

最佳应用场景

  • Button active/pressed states
  • Toggle switches
  • Checkbox/radio selections
  • Focus ring appearance
  • Hover color shifts
  • Touch ripple initiation
  • 按钮激活/按压状态
  • 开关切换
  • 复选框/单选框选择
  • 聚焦环出现
  • 悬停颜色变化
  • 触摸波纹启动

Implementation Pattern

实现示例

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

.toggle-on {
  background: var(--active);
  transition: background 80ms ease-out;
}
css
.button:active {
  transform: scale(0.97);
  transition: transform 50ms ease-out;
}

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

Key Insight

核心要点

At instant speeds, animation serves confirmation, not communication. Users shouldn't consciously perceive the animation - they should feel the interface responding.
在即时速度下，动画的作用是确认操作，而非传递信息。用户不应有意识地察觉到动画的存在——他们只需要感受到界面在即时响应。