Back to Details

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

核心时长尺度

CategoryDurationUse For
Instant100-150msHovers, toggles, micro-states
Fast150-250msFeedback, small transitions
Standard250-400msModals, reveals, state changes
Slow400-600msPage transitions, sequences
Deliberate600-1000msDramatic 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项动画原则速查

  1. Squash & Stretch: Scale 0.95-1.05 range for organic feel
  2. Anticipation: 2-3px reverse movement or 50ms pause before action
  3. Staging: Animate toward user attention, clear visual hierarchy
  4. Straight Ahead vs Pose-to-Pose: Define keyframes, plan states
  5. Follow Through: Overshoot by 2-5%, settle back
  6. Slow In/Slow Out: Always ease, never linear (except spinners)
  7. Arcs: Combine X+Y movement, natural paths
  8. Secondary Action: Layer 2-3 properties max (opacity + transform + shadow)
  9. Timing: Match duration to distance/importance
  10. Exaggeration: Subtle for UI (under 10% deviation)
  11. Solid Drawing: Maintain visual consistency during motion
  12. Appeal: Motion should feel helpful, not performative
  1. 挤压与拉伸：在0.95-1.05的缩放范围内实现自然质感
  2. 预备动作：动作前添加2-3px反向位移或50ms停顿
  3. 画面布局：动效应引导用户注意力，保持清晰的视觉层级
  4. 逐帧动画与关键帧动画：定义关键帧，规划状态变化
  5. 跟随动作：先过冲2-5%，再回归原位
  6. 慢入慢出：始终使用缓动效果，除非是加载 spinner 否则不要用线性动效
  7. 弧线运动：结合X轴与Y轴位移，模拟自然运动路径
  8. 次要动作：最多叠加2-3种属性（透明度 + 变换 + 阴影）
  9. 时长匹配：动效时长与位移距离/重要性相匹配
  10. 夸张效果：UI中需保持克制，偏差不超过10%
  11. 扎实绘制：动效过程中保持视觉一致性
  12. 吸引力：动效应实用，而非单纯为了展示

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

通用规则

  1. 100ms Response Time: User actions must trigger visible change within 100ms
  2. Under 400ms for UI: Functional animations shouldn't exceed 400ms
  3. Reduce Motion: Always provide 
    prefers-reduced-motion
    alternative
  4. GPU Properties: Use only 
    transform
    and 
    opacity
    for smooth 60fps
  5. Exit < Enter: Exits 20-30% faster than entrances
  1. 100ms响应时间：用户操作必须在100ms内触发可见变化
  2. UI动效不超400ms：功能性动效时长不应超过400ms
  3. 简化动效选项：始终提供
    prefers-reduced-motion
    替代方案
  4. GPU加速属性：仅使用
    transform
    和
    opacity
    以实现60fps流畅动效
  5. 退场快于入场：退场动效应比入场动效快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

决策树

  1. Is element entering? → Use ease-out, 200-300ms
  2. Is element exiting? → Use ease-in, 150-250ms
  3. Is element changing state? → Use ease-in-out, 150-250ms
  4. Is it continuous? → Use linear (rotation) or ease-in-out (pulse)
  5. 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)
  1. 元素是否入场？→ 使用ease-out，时长200-300ms
  2. 元素是否退场？→ 使用ease-in，时长150-250ms
  3. 元素是否切换状态？→ 使用ease-in-out，时长150-250ms
  4. 是否为连续动效？→ 使用线性（如旋转）或ease-in-out（如脉冲）
  5. 是否响应用户手势？→ 使用带过冲的ease-out，时长不超200ms
若拿不定主意，默认使用：
250ms cubic-bezier(0.4, 0, 0.2, 1)