需要制作限时优惠、低库存、倒计时、错误提示或 CTA…

适用于限时优惠、低库存警告、倒计时器、表单验证错误、通知徽章、CTA 按钮和结账等需要推动用户立即行动的界面动画。

适用场景

解决思路

1. 用动态、向前推进的运动吸引注意、创造势头并消除犹豫，促使用户立即响应，表达时间敏感性。
2. Squash & Stretch：使用尖锐、有冲击力的形变。
3. Squash & Stretch：落地时快速 squash（15-25%）以制造冲击。
4. Squash & Stretch：运动时快速 stretch 以表现速度和力量。
5. Anticipation：预备动作极短或没有（0-50ms）。
6. Anticipation：跳过蓄力，直接、立即行动，实现即时响应。
7. Staging：激进聚焦 call-to-action；使用高对比和运动隔离。
8. Staging：让其他元素后退，用聚光突出紧急元素。
9. Straight Ahead Action：创建不可预测、抓注意的运动；用于脉冲、抖动或紧急指示动画。
10. Follow Through & Overlapping Action：保留最少 follow-through；用急停传达果断。
11. Follow Through & Overlapping Action：不要拖尾，立即结束以驱动行动。
12. Slow In & Slow Out：采用非对称缓动，快速开始、突然结束；使用 `ease-out` 并带高初速度。
13. Slow In & Slow Out：用 `cubic-bezier(0.0, 0, 0.2, 1)` 做激进加速。
14. Arc：为速度使用直接、线性路径；走最短路线。
15. Arc：使用直线；曲线路径会显得悠闲。
16. Secondary Action：加入抓注意的脉冲、发光或抖动。
17. Secondary Action：让徽章计数器弹跳；用细微但持续的运动吸引视线。
18. Timing：使用快速、有力的动画（100-200ms）；快速动画制造能量。
19. Timing：脉冲间隔设为 1-2 秒，以维持注意且不烦人。
20. Exaggeration：夸张程度中到高（20-40%）；放大运动以抓注意。
21. Exaggeration：通知使用超大弹跳，错误使用强调抖动。
22. Solid Drawing：使用强烈、大胆的形体和高对比形状来吸引注意。
23. Solid Drawing：不要微妙，清晰最重要。
24. Appeal：使用大胆颜色（红、橙）和强对比。
25. Appeal：使用非对称、动态构图，使其感觉活跃而非静态。
26. Attention pulse：150-200ms，`ease-out`。
27. CTA bounce：200-300ms，`ease-out-back`。
28. Countdown tick：100ms，`linear`。
29. Error shake：300-400ms，`ease-in-out`。
30. CSS 缓动：`--urgency-snap: cubic-bezier(0.0, 0, 0.2, 1);`。
31. CSS 缓动：`--urgency-punch: cubic-bezier(0.25, 0.46, 0.45, 0.94);`。
32. CSS 缓动：`--urgency-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);`。
33. 使用 `@keyframes urgent-pulse`：0%, 100% `transform: scale(1);`，50% `transform: scale(1.05);`。
34. 使用 `@keyframes urgent-shake`：0%, 100% `transform: translateX(0);`，25% `transform: translateX(-4px);`，75% `transform: translateX(4px);`。

适用边界 · 注意事项

• 只在真正时间敏感的情况下使用紧迫感；不要伪造稀缺，假稀缺会损害信任。