Back to Details

web-motion-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Web Motion Design

Web动效设计

Apply Disney's 12 animation principles to CSS, JavaScript, and frontend frameworks.
将迪士尼的12条动画原则应用到CSS、JavaScript及前端框架中。

Quick Reference

快速参考

PrincipleWeb Implementation
Squash & Stretch
transform: scale()
on interaction states
AnticipationSlight reverse movement before action
StagingFocus user attention with motion hierarchy
Straight Ahead / Pose to PoseJS frame-by-frame vs CSS keyframes
Follow Through / OverlappingStaggered child animations, elastic easing
Slow In / Slow Out
ease-in-out
, cubic-bezier curves
Arc
motion-path
or bezier translate transforms
Secondary ActionShadows, glows responding to primary motion
TimingDuration: micro 100-200ms, standard 200-400ms
ExaggerationScale beyond 1.0, overshoot animations
Solid DrawingConsistent transform-origin, 3D perspective
AppealSmooth 60fps, purposeful motion design
原则Web端实现方式
挤压与拉伸（Squash & Stretch）交互状态下使用 
transform: scale()
预备动作（Anticipation）动作执行前的轻微反向移动
舞台呈现（Staging）利用动效层级引导用户注意力
逐帧动画/关键帧动画（Straight Ahead / Pose to Pose）JS逐帧动画 vs CSS关键帧动画
跟随动作/重叠动作（Follow Through / Overlapping）子元素动画 stagger 效果、弹性缓动
缓入缓出（Slow In / Slow Out）
ease-in-out
、三次贝塞尔曲线
弧线运动（Arc）
motion-path
或贝塞尔曲线变换
次要动作（Secondary Action）随主运动变化的阴影、发光效果
时间节奏（Timing）时长：微交互100-200ms，标准动效200-400ms
夸张表现（Exaggeration）缩放超过1.0、过冲动画
扎实造型（Solid Drawing）一致的transform-origin、3D透视
吸引力（Appeal）流畅60fps、有目的性的动效设计

Principle Applications

原则应用

Squash & Stretch: Apply 
scaleY
compression on button press, 
scaleX
stretch on hover. Keep volume constant—if you compress Y, expand X slightly.
Anticipation: Before expanding a dropdown, shrink it 2-3% first. Before sliding content left, move it 5px right.
Staging: Dim background elements during modal focus. Use motion to direct eye flow—animate important elements first.
Straight Ahead vs Pose to Pose: Use CSS 
@keyframes
for predictable, repeatable animations (pose to pose). Use JavaScript/GSAP for dynamic, physics-based motion (straight ahead).
Follow Through & Overlapping: Child elements should complete movement after parent stops. Use 
animation-delay
with decreasing values for natural stagger.
Slow In / Slow Out: Never use 
linear
for UI motion. Standard easing: 
cubic-bezier(0.4, 0, 0.2, 1)
. Enter: 
cubic-bezier(0, 0, 0.2, 1)
. Exit: 
cubic-bezier(0.4, 0, 1, 1)
.
Arc: Elements in nature move in arcs, not straight lines. Use 
offset-path
or combine X/Y transforms with different easings.
Secondary Action: Button shadow grows/blurs on hover. Icon inside button rotates while button scales. Background particles respond to primary element.
Timing: Micro-interactions: 100-200ms. Standard transitions: 200-400ms. Complex sequences: 400-700ms. Page transitions: 300-500ms.
Exaggeration: Hover states scale to 1.05-1.1, not 1.01. Error shakes move 10-20px, not 2px. Make motion noticeable but not jarring.
Solid Drawing: Maintain consistent 
transform-origin
. Use 
perspective
for 3D depth. Avoid conflicting transforms that create visual glitches.
Appeal: Target 60fps—use 
transform
and 
opacity
only when possible. Add subtle personality through custom easing curves. Motion should feel intentional.
挤压与拉伸（Squash & Stretch）：按钮按下时应用
scaleY
压缩， hover时应用
scaleX
拉伸。保持体积恒定——如果压缩Y轴，需轻微扩展X轴。
预备动作（Anticipation）：展开下拉菜单前，先将其缩小2-3%。内容向左滑动前，先向右移动5px。
舞台呈现（Staging）：模态框聚焦时调暗背景元素。利用动效引导视线——先为重要元素添加动画。
逐帧动画 vs 关键帧动画：可预测、可重复的动画使用CSS 
@keyframes
（关键帧动画）。动态、基于物理的动效使用JavaScript/GSAP（逐帧动画）。
跟随动作/重叠动作：子元素应在父元素停止运动后完成自身动画。使用递减的
animation-delay
实现自然的 stagger 效果。
缓入缓出（Slow In / Slow Out）：UI动效切勿使用
linear
缓动。标准缓动：
cubic-bezier(0.4, 0, 0.2, 1)
。入场：
cubic-bezier(0, 0, 0.2, 1)
。退场：
cubic-bezier(0.4, 0, 1, 1)
。
弧线运动（Arc）：自然界中的元素沿弧线运动，而非直线。使用
offset-path
或为X/Y变换设置不同缓动曲线。
次要动作（Secondary Action）：按钮hover时阴影放大/模糊。按钮内图标随按钮缩放同步旋转。背景粒子随主元素运动做出响应。
时间节奏（Timing）：微交互：100-200ms。标准过渡：200-400ms。复杂序列：400-700ms。页面过渡：300-500ms。
夸张表现（Exaggeration）：Hover状态缩放至1.05-1.1，而非1.01。错误提示抖动幅度为10-20px，而非2px。动效应醒目但不突兀。
扎实造型（Solid Drawing）：保持
transform-origin
一致。使用
perspective
实现3D深度。避免冲突的变换导致视觉 glitch。
吸引力（Appeal）：目标为60fps——尽可能仅使用
transform
和
opacity
。通过自定义缓动曲线增添细微个性。动效应具备明确目的性。

Code Patterns

代码示例

css
/* Elastic button with squash/stretch */
.button:active {
  transform: scale(0.95, 1.05);
  transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Anticipation before expansion */
.dropdown-enter {
  animation: dropdown-open 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dropdown-open {
  0% { transform: scaleY(0.98); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}
css
/* 带挤压拉伸效果的弹性按钮 */
.button:active {
  transform: scale(0.95, 1.05);
  transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 展开前的预备动作 */
.dropdown-enter {
  animation: dropdown-open 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dropdown-open {
  0% { transform: scaleY(0.98); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}

Performance Rules

性能规则

  1. Animate only 
    transform
    and 
    opacity
    for GPU acceleration
  2. Use 
    will-change
    sparingly and remove after animation
  3. Prefer CSS over JavaScript when animation is predictable
  4. Test on low-powered devices
  1. 仅对
    transform
    和
    opacity
    设置动画以利用GPU加速
  2. 谨慎使用
    will-change
    ，动画结束后移除该属性
  3. 可预测的动效优先使用CSS而非JavaScript
  4. 在低性能设备上进行测试