universal-patterns

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Universal Animation Patterns

通用动效设计模式

Apply Disney's 12 principles as baseline defaults for any animation.

将迪士尼12项动画原则作为所有动效的基准默认规范。

Core Timing Scale

核心时长尺度

Category	Duration	Use For
Instant	100-150ms	Hovers, toggles, micro-states
Fast	150-250ms	Feedback, small transitions
Standard	250-400ms	Modals, reveals, state changes
Slow	400-600ms	Page transitions, sequences
Deliberate	600-1000ms	Dramatic reveals, celebrations

类别	时长范围	适用场景
即时	100-150ms	悬停效果、开关切换、微状态变化
快速	150-250ms	操作反馈、小型过渡动效
标准	250-400ms	模态框、内容展开、状态变更
缓慢	400-600ms	页面切换、序列动效
刻意型	600-1000ms	戏剧性展示、庆祝类动效

Universal Easing Library

通用缓动函数库

css

:root {
  /* Standard easings */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);        /* Entrances */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);         /* Exits */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);   /* State changes */

  /* Spring easings */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* Overshoot */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Playful */
}

css

:root {
  /* Standard easings */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);        /* 入场动效 */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);         /* 退场动效 */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);   /* 状态切换 */

  /* Spring easings */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* 过冲效果 */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 弹跳效果 */
}

The 12 Principles Quick Reference

12项动画原则速查

Squash & Stretch: Scale 0.95-1.05 range for organic feel
Anticipation: 2-3px reverse movement or 50ms pause before action
Staging: Animate toward user attention, clear visual hierarchy
Straight Ahead vs Pose-to-Pose: Define keyframes, plan states
Follow Through: Overshoot by 2-5%, settle back
Slow In/Slow Out: Always ease, never linear (except spinners)
Arcs: Combine X+Y movement, natural paths
Secondary Action: Layer 2-3 properties max (opacity + transform + shadow)
Timing: Match duration to distance/importance
Exaggeration: Subtle for UI (under 10% deviation)
Solid Drawing: Maintain visual consistency during motion
Appeal: Motion should feel helpful, not performative

挤压与拉伸：在0.95-1.05的缩放范围内实现自然质感
预备动作：动作前添加2-3px反向位移或50ms停顿
画面布局：动效应引导用户注意力，保持清晰的视觉层级
逐帧动画与关键帧动画：定义关键帧，规划状态变化
跟随动作：先过冲2-5%，再回归原位
慢入慢出：始终使用缓动效果，除非是加载 spinner 否则不要用线性动效
弧线运动：结合X轴与Y轴位移，模拟自然运动路径
次要动作：最多叠加2-3种属性（透明度 + 变换 + 阴影）
时长匹配：动效时长与位移距离/重要性相匹配
夸张效果：UI中需保持克制，偏差不超过10%
扎实绘制：动效过程中保持视觉一致性
吸引力：动效应实用，而非单纯为了展示

Base Animation Classes

基础动画类

css

/* Standard entrance */
.animate-in {
  animation: fade-in 250ms var(--ease-out) forwards;
}

/* Standard exit */
.animate-out {
  animation: fade-out 200ms var(--ease-in) forwards;
}

/* State transition */
.animate-state {
  transition: all 200ms var(--ease-in-out);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

css

/* 标准入场动效 */
.animate-in {
  animation: fade-in 250ms var(--ease-out) forwards;
}

/* 标准退场动效 */
.animate-out {
  animation: fade-out 200ms var(--ease-in) forwards;
}

/* 状态切换动效 */
.animate-state {
  transition: all 200ms var(--ease-in-out);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

Universal Rules

通用规则

100ms Response Time: User actions must trigger visible change within 100ms
Under 400ms for UI: Functional animations shouldn't exceed 400ms
Reduce Motion: Always provide
```
prefers-reduced-motion
```
alternative
GPU Properties: Use only
```
transform
```
and
```
opacity
```
for smooth 60fps
Exit < Enter: Exits 20-30% faster than entrances

100ms响应时间：用户操作必须在100ms内触发可见变化
UI动效不超400ms：功能性动效时长不应超过400ms
简化动效选项：始终提供
```
prefers-reduced-motion
```
替代方案
GPU加速属性：仅使用
```
transform
```
和
```
opacity
```
以实现60fps流畅动效
退场快于入场：退场动效应比入场动效快20-30%

Accessibility Default

无障碍适配默认设置

css

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

css

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Decision Tree

决策树

Is element entering? → Use ease-out, 200-300ms
Is element exiting? → Use ease-in, 150-250ms
Is element changing state? → Use ease-in-out, 150-250ms
Is it continuous? → Use linear (rotation) or ease-in-out (pulse)
Is it responding to gesture? → Use ease-out with overshoot, under 200ms

When uncertain, start with:

250ms cubic-bezier(0.4, 0, 0.2, 1)

元素是否入场？→ 使用ease-out，时长200-300ms
元素是否退场？→ 使用ease-in，时长150-250ms
元素是否切换状态？→ 使用ease-in-out，时长150-250ms
是否为连续动效？→ 使用线性（如旋转）或ease-in-out（如脉冲）
是否响应用户手势？→ 使用带过冲的ease-out，时长不超200ms

若拿不定主意，默认使用：

250ms cubic-bezier(0.4, 0, 0.2, 1)