Back to Details

small-200-300ms

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Small Transitions (200-300ms)

小型过渡（200-300ms）

At 200-300ms, users consciously perceive motion. This duration bridges micro-interactions and full animations - ideal for UI state changes.
在200-300毫秒的时长下，用户会有意识地感知到动效。这个时长衔接了微交互和完整动画，是UI状态变化的理想选择。

Disney Principles at Small Duration

短时长下的迪士尼动画原则

Works Well

适用原则

Squash & Stretch: Visible but restrained - 10-15% for playful interfaces, 5% for professional.
Anticipation: Brief wind-up works - 40-60ms preparation enhances 200ms main action.
Staging: Clear hierarchy - primary element leads, secondary follows by 50-100ms.
Straight Ahead/Pose to Pose: Pose to pose preferred - keyframes create polished motion.
Follow Through: Noticeable overshoot - 5-10% past target adds life.
Slow In/Slow Out: Full easing curves - both ease-in-out and custom beziers shine.
Arcs: Natural curves enhance - elements can travel on arcs rather than straight lines.
Secondary Action: One or two secondary actions - fade + scale, move + rotate.
Timing: 12-18 frames at 60fps. Smooth, deliberate motion.
Exaggeration: Moderate to pronounced - depends on brand personality.
Solid Drawing: Full transform combinations - translate, scale, rotate together.
Appeal: Conscious animation that builds brand character.
挤压与拉伸：效果可见但有所克制——娱乐向界面可调整10-15%，专业向界面调整5%即可。
预备动作：简短的前置动效效果很好——40-60毫秒的准备动作可以提升200毫秒主动画的表现。
画面布局：层级清晰——主元素先动，次要元素延后50-100毫秒跟随。
逐帧动画/关键帧动画：优先选择关键帧动画——关键帧可以打造更精致的动效。
跟随动作：明显的超幅偏移——超出目标位置5-10%的效果可以让动效更生动。
缓入缓出：完整的缓动曲线——ease-in-out和自定义贝塞尔曲线都能有出色表现。
弧形运动：自然曲线提升效果——元素可以沿弧线而非直线运动。
次要动作：1-2个次要动作——比如淡入+缩放、移动+旋转。
时序：60fps下12-18帧，动作流畅、清晰。
夸张效果：中度到明显的夸张程度，具体取决于品牌调性。
立体绘制：完整的变换组合——同时使用位移、缩放、旋转。
吸引力：用户能感知到的动画可以塑造品牌特征。

Doesn't Work

不适用场景

  • Feeling instant (too slow)
  • Complex character animation
  • Long travel distances
  • Multiple sequential stages
  • 想要达到「瞬间响应」的感受（该时长过慢）
  • 复杂的角色动画
  • 长距离移动
  • 多阶段连续动作

Easing Recommendations

缓动推荐

css
/* 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);
css
/* 标准平滑过渡 */
transition: all 250ms ease-out;

/* 模态框/卡片出现 - 利落的出现效果 */
transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);

/* 活泼弹跳风格 */
transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);

/* 专业细腻风格 */
transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);

Best Use Cases

最佳使用场景

  • Modal dialogs appearing
  • Card expand/collapse
  • Navigation drawer slides
  • Tab content transitions
  • Filter panel toggles
  • Image thumbnails expanding
  • Alert/notification slides
  • 模态对话框出现
  • 卡片展开/收起
  • 导航抽屉滑入滑出
  • 标签页内容切换过渡
  • 筛选面板开关
  • 图片缩略图放大
  • 警告/通知滑入滑出

Implementation Pattern

实现示例

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

Key Insight

核心要点

Small transitions are seen and understood. Users track the motion and their brain processes the spatial relationship. Use this to guide attention and communicate hierarchy.
小型过渡是用户能看见且理解的。用户会追踪动效，大脑会处理空间关系。你可以利用这一点引导用户注意力、传达界面层级。