Back to Details

micro-100-200ms

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Micro Animations (100-200ms)

微动画（100-200ms）

The 100-200ms range is the sweet spot for micro-interactions. Fast enough to feel responsive, slow enough to be perceived as intentional motion.
100-200ms的时长范围是微交互的黄金区间。快到能让用户觉得响应及时，慢到能让用户感知到这是有意设计的动效。

Disney Principles at Micro Speed

微速下的迪士尼动画原则

Works Well

适用场景

Squash & Stretch: Light application - 5-10% works for bouncy buttons, appearing elements.
Anticipation: Micro-anticipation possible - 20-30ms wind-up before 150ms action.
Staging: Single focal point - one element moving, rest static.
Straight Ahead/Pose to Pose: Either works - simple enough for straight ahead, controlled enough for poses.
Follow Through: Minimal overshoot - 2-5% past target, settle quickly.
Slow In/Slow Out: 
ease-out
dominates - elements should arrive confidently.
Arcs: Slight curves possible - dropdown items can arc subtly rather than straight down.
Secondary Action: One secondary max - icon rotates while menu opens.
Timing: 6-12 frames at 60fps. Enough for smooth motion.
Exaggeration: Moderate - scale 0.9-1.1, rotation up to 30 degrees.
Solid Drawing: Simple transforms - scale, opacity, short translations.
Appeal: Quick animations feel modern and polished.
挤压与拉伸（Squash & Stretch）：轻度应用——5-10%的幅度适用于有弹性的按钮、出现的元素。
预备动作（Anticipation）：可实现微预备动作——在150ms的动作前设置20-30ms的蓄力阶段。
舞台呈现（Staging）：单一焦点——仅一个元素动，其余保持静止。
逐帧动画/关键帧动画（Straight Ahead/Pose to Pose）：两种方式都适用——足够简单可采用逐帧动画，需要控制时可采用关键帧动画。
跟随动作（Follow Through）：最小程度的过冲——超过目标位置2-5%后快速归位。
缓入缓出（Slow In/Slow Out）：
ease-out
为主——元素应干脆利落地到达目标位置。
弧线运动（Arcs）：可采用轻微曲线——下拉菜单项可以沿微妙弧线运动，而非直线下落。
次要动作（Secondary Action）：最多一个次要动作——菜单展开时图标同步旋转。
时长（Timing）：60fps下6-12帧。足够实现流畅动效。
夸张（Exaggeration）：适度夸张——缩放比例0.9-1.1，旋转角度最高30度。
扎实绘制（Solid Drawing）：简单变换——缩放、透明度调整、短距离位移。
吸引力（Appeal）：快速动画会给人现代、精致的感觉。

Doesn't Work

不适用场景

  • Long travel distances
  • Complex choreography
  • Heavy physics simulations
  • Multi-stage reveals
  • Elaborate anticipation sequences
  • 长距离移动
  • 复杂的编排
  • 重型物理模拟
  • 多阶段展示
  • 复杂的预备动作序列

Easing Recommendations

缓动效果推荐

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

Best Use Cases

最佳应用场景

  • Tooltip appearance
  • Dropdown menus opening
  • Icon state changes
  • Small hover animations
  • Notification badges
  • Tab switches
  • Accordion headers
  • 提示框出现
  • 下拉菜单展开
  • 图标状态变化
  • 小型悬停动画
  • 通知徽章
  • 标签页切换
  • 折叠面板标题

Implementation Pattern

实现模式

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

Key Insight

核心见解

Micro-animations are felt more than watched. Users notice when they're missing but don't consciously observe them. This is where polish lives.
微动画是感受多于观察的。用户会注意到它们的缺失，但不会有意识地去观察它们。这就是产品精致感的来源。