Back to Details

buttons-ctas

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Button & CTA Animation Principles

按钮与CTA动画设计原则

Apply Disney's 12 principles to create buttons that feel alive and responsive.
运用迪士尼12动画原则，打造富有生命力且响应灵敏的按钮。

Principles Applied to Buttons

适用于按钮的原则

1. Squash & Stretch

1. 挤压与拉伸（Squash & Stretch）

Scale buttons slightly on press: 
transform: scale(0.95)
on 
:active
, return to 
scale(1)
on release. Creates tactile feedback.
按钮按下时轻微缩放：
:active
状态下使用
transform: scale(0.95)
，释放时恢复为
scale(1)
。营造触觉反馈。

2. Anticipation

2. 预备动作（Anticipation）

Subtle hover lift before click: 
transform: translateY(-2px)
prepares users for the action.
点击前的微妙悬停抬起效果：
transform: translateY(-2px)
，让用户为操作做好准备。

3. Staging

3. 舞台呈现（Staging）

Primary CTAs should be visually prominent. Use size, color contrast, and whitespace. Animate primary buttons more boldly than secondary.
主CTA应视觉突出。利用尺寸、色彩对比度和留白。主按钮的动画效果要比次要按钮更醒目。

4. Straight Ahead & Pose to Pose

4. 逐帧动画与关键帧动画（Straight Ahead & Pose to Pose）

Use pose-to-pose for button states: define clear keyframes for default, hover, active, and disabled states.
为按钮状态使用关键帧动画：为默认、悬停、激活和禁用状态定义清晰的关键帧。

5. Follow Through & Overlapping Action

5. 跟随动作与重叠动作（Follow Through & Overlapping Action）

After click, let shadows or glows settle slightly after the button returns. Icon inside can lag 20-50ms behind button movement.
点击后，在按钮恢复原位后，让阴影或光晕稍作停留。按钮内的图标可滞后按钮移动20-50毫秒。

6. Ease In & Ease Out

6. 缓入缓出（Ease In & Ease Out）

Never use linear timing. Use 
ease-out
for hover-in (fast start), 
ease-in
for hover-out (gentle exit). 
cubic-bezier(0.4, 0, 0.2, 1)
works well.
切勿使用线性计时。悬停进入时使用
ease-out
（快速启动），悬停退出时使用
ease-in
（平缓退出）。
cubic-bezier(0.4, 0, 0.2, 1)
效果良好。

7. Arcs

7. 弧线运动（Arcs）

Floating action buttons should move in arcs when repositioning. Use 
transform
with easing rather than straight-line movement.
浮动操作按钮重新定位时应沿弧线运动。使用带缓动效果的
transform
，而非直线移动。

8. Secondary Action

8. 次要动作（Secondary Action）

Ripple effects, icon rotations, or shadow changes accompany the primary scale/color change. Don't let secondary actions overpower.
涟漪效果、图标旋转或阴影变化可伴随主要的缩放/颜色变化。不要让次要动作盖过主要动作。

9. Timing

9. 时长控制（Timing）

  • Hover: 150-200ms
  • Active/press: 50-100ms (snappy)
  • Focus ring: 150ms
  • Loading state transition: 200-300ms
  • 悬停：150-200毫秒
  • 激活/按下：50-100毫秒（干脆利落）
  • 聚焦环：150毫秒
  • 加载状态过渡：200-300毫秒

10. Exaggeration

10. 夸张表现（Exaggeration）

Success buttons can briefly scale to 1.05 before settling. Error states can include subtle shake (3-5px, 2-3 cycles).
成功状态的按钮可短暂缩放至1.05后恢复原位。错误状态可加入轻微抖动（3-5像素，2-3次循环）。

11. Solid Drawing

11. 扎实造型（Solid Drawing）

Maintain consistent border-radius and proportions across states. Shadows should respect light source direction throughout.
在所有状态下保持一致的圆角和比例。阴影应始终符合光源方向。

12. Appeal

12. 吸引力（Appeal）

Round corners feel friendly, sharp corners feel professional. Match button personality to brand. Satisfying click feedback increases conversions.
圆角给人友好感，尖角显得专业。让按钮风格与品牌调性匹配。令人愉悦的点击反馈能提升转化率。

CSS Implementation

CSS实现

css
.btn {
  transition: transform 150ms ease-out,
              box-shadow 150ms ease-out,
              background-color 150ms ease-out;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn:active {
  transform: scale(0.97) translateY(0);
  transition-duration: 50ms;
}
css
.btn {
  transition: transform 150ms ease-out,
              box-shadow 150ms ease-out,
              background-color 150ms ease-out;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn:active {
  transform: scale(0.97) translateY(0);
  transition-duration: 50ms;
}

Key Properties

关键属性

  • transform
    : scale, translate
  • box-shadow
    : depth changes
  • background-color
    : state indication
  • opacity
    : disabled states
  • filter
    : brightness on hover
  • transform
    : scale, translate
  • box-shadow
    : 深度变化
  • background-color
    : 状态指示
  • opacity
    : 禁用状态
  • filter
    : 悬停时亮度调整