Back to Details

urgency-action

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Urgency & Action Animation

紧迫感与行动导向动画

Create animations that motivate immediate response and communicate time-sensitivity.
创建能激发用户即时响应、传递时间紧迫性的动画。

Emotional Goal

情感目标

Urgency creates a compelling need to act now. Action-driving animations capture attention, create momentum, and remove hesitation through dynamic, forward-moving motion.
紧迫感会催生“立即行动”的强烈需求。行动导向的动画通过动态、向前的运动效果吸引注意力、营造动力并消除用户的犹豫。

Disney Principles for Urgency

用于营造紧迫感的迪士尼动画原则

Squash & Stretch

挤压与拉伸

Sharp, impactful deformations. Quick squash on landing (15-25%) creates impact. Fast stretch during motion shows speed and force.
鲜明、有冲击力的变形效果。落地时快速挤压（15-25%）以营造冲击力，运动过程中快速拉伸以展现速度与力量。

Anticipation

预备动作

Very short or none (0-50ms). Urgency means no time to prepare. Direct, immediate action. Skip wind-up for instant response.
极短或完全省略（0-50毫秒）。紧迫感意味着没有时间准备，需直接、即时的动作，跳过预备阶段以实现即时响应。

Staging

舞台呈现

Aggressive focus on call-to-action. High contrast, motion isolation. Everything else should recede. Spotlight the urgent element.
重点突出行动召唤（CTA）元素。采用高对比度、运动隔离效果，其他所有元素都应退居次要位置，聚焦于紧急元素。

Straight Ahead Action

连续动作动画

Creates unpredictable, attention-grabbing movement. Use for pulsing, shaking, or urgent indicator animations.
创造不可预测、吸引注意力的运动效果，适用于脉冲、震动或紧急提示类动画。

Follow Through & Overlapping Action

跟随动作与重叠动作

Minimal follow-through. Sharp stops communicate decisiveness. No lingering—immediate resolution drives action.
尽量减少跟随动作，戛然而止的停顿传达果断感。没有拖沓——即时收尾推动用户行动。

Slow In & Slow Out

慢入慢出

Asymmetric: fast start, abrupt end. 
ease-out
with high initial velocity. 
cubic-bezier(0.0, 0, 0.2, 1)
for aggressive acceleration.
非对称效果：快速启动，突然结束。使用具有高初始速度的
ease-out
，推荐使用
cubic-bezier(0.0, 0, 0.2, 1)
实现极具冲击力的加速效果。

Arc

运动轨迹

Direct, linear paths for speed. Urgency takes the shortest route. Curved paths feel leisurely—use straight lines.
采用直接、线性的路径以体现速度。紧迫感要求走最短路径，弯曲路径会显得悠闲，因此应使用直线。

Secondary Action

次要动作

Attention-grabbing pulses, glows, or shakes. Badge counters that bounce. Subtle but persistent motion draws eyes.
吸引注意力的脉冲、发光或震动效果，比如弹跳的徽章计数器。细微但持续的运动能吸引用户目光。

Timing

时间节奏

Fast and punchy (100-200ms). Rapid animations create energy. Pulse intervals: 1-2 seconds to maintain attention without annoyance.
快速且有力（100-200毫秒）。快速的动画能营造活力。脉冲间隔设置为1-2秒，以保持注意力同时避免引起反感。

Exaggeration

夸张效果

Moderate to high (20-40%). Amplified motion captures attention. Oversized bounces on notifications, emphasized shakes on errors.
中度到高度夸张（20-40%）。放大的运动效果吸引注意力，比如通知的大幅弹跳、错误提示的强化震动。

Solid Drawing

扎实造型

Strong, bold forms. High-contrast shapes that command attention. No subtlety—clarity is paramount.
清晰、醒目的形态。高对比度的形状能抓住注意力，无需含蓄——清晰性是重中之重。

Appeal

吸引力

Bold colors (red, orange). Strong contrast. Asymmetric, dynamic compositions that feel active, not static.
采用大胆的颜色（红色、橙色）、高对比度，以及不对称的动态构图，营造活跃而非静态的视觉效果。

Timing Recommendations

时间节奏建议

ElementDurationEasing
Attention pulse150-200ms
ease-out
CTA bounce200-300ms
ease-out-back
Countdown tick100ms
linear
Error shake300-400ms
ease-in-out
元素时长缓动效果
注意力脉冲150-200毫秒
ease-out
CTA弹跳200-300毫秒
ease-out-back
倒计时跳动100毫秒
linear
错误震动300-400毫秒
ease-in-out

CSS Easing

CSS缓动效果

css
--urgency-snap: cubic-bezier(0.0, 0, 0.2, 1);
--urgency-punch: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--urgency-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
css
--urgency-snap: cubic-bezier(0.0, 0, 0.2, 1);
--urgency-punch: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--urgency-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);

Attention Patterns

注意力吸引动画模式

css
@keyframes urgent-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes urgent-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
css
@keyframes urgent-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes urgent-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

When to Use

适用场景

  • Limited-time offers and sales
  • Low stock warnings
  • Countdown timers
  • Form validation errors
  • Notification badges
  • Call-to-action buttons
  • Checkout urgency
  • 限时优惠与促销活动
  • 库存不足警告
  • 倒计时计时器
  • 表单验证错误提示
  • 通知徽章
  • 行动召唤按钮
  • 结账流程中的紧迫感营造

Ethics Note

伦理提示

Use urgency honestly. Fake scarcity damages trust. Reserve for genuinely time-sensitive situations.
诚信使用紧迫感效果。虚假稀缺会损害用户信任，仅将其用于真正具有时间紧迫性的场景。