UI小姐姐要求有“Duang~Duang”的效果怎么办？

设计小姐姐： “搞一下这样的回弹效果，你行不行？”

我：“行！直接梭哈 50 行 keyframes + transform + 各种百分比，搞定 ”

设计小姐姐：“太硬（撇嘴），不够 Q 弹（鄙视）”

我：(裂开)

隔壁老王：这么简单你都不行，我来一行贝塞尔 cubic-bezier(0.3, 1.15, 0.33, 1.57) 秒了😎

设计小姐姐：哇哦！（兴奋）好帅！（星星眼🌟）好Q弹！（一脸崇拜😍）

我：“？？？”

🧠 一、为什么一行贝塞尔就能“Duang”起来？

1️⃣ cubic-bezier 是什么？

在 CSS 动画里，我们经常写：

transition: all 0.5s ease;

但其实 ease、linear、ease-in-out 这些都只是封装好的贝塞尔曲线。

底层原理是：

cubic-bezier(x1, y1, x2, y2)

这四个参数定义了时间函数曲线，控制动画速度的变化。

• 
  
• x：时间轴（必须在 0～1 之间）
  
• y：数值轴（可以超出 0～1！）
  

👉 当 y 超过 1 或小于 0 时，动画值就会冲过终点再回弹，

这就是“回弹感”的核心。

2️⃣ 回弹的本质：过冲 + 衰减

想象一个球掉下来：

• 
  
• 过冲：球落地时会压扁（超出终点）
  
• 回弹：然后反弹回来，再逐渐稳定
  

在动画中，这个“过冲”就是 y>1 的部分，

而“回弹”就是曲线回到 y=1 的过程。

🧪 二、一行贝塞尔的魔法

✅ 火箭发射

<div class="bounce">🚀发射！</div>

<style>
.bounce {
transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);

}
.bounce:hover {
transform: translateY(-500px);

}
</style>

💡 参数解析：

• 
  
• y1 = -0.55 → 先轻微反向缩小
  
• y2 = 1.55 → 再冲过头 55%，最后回弹到原位
  

🧩 四、常用贝塞尔参数

🧰 五、调试神器推荐

• 
  
• 🎨 cubic-bezier.com
  
  拖动手柄实时预览动画，复制参数一键搞定。
  
• ⚙️ easings.net
  
  收录各种 easing 函数（含物理弹簧、阻尼等）。