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

设计小姐姐： “搞一下这样的回弹效果，你行不行？”
我：“行！直接梭哈 50 行 keyframes + transform + 各种百分比，搞定 ”
设计小姐姐：“太硬（撇嘴），不够 Q 弹（鄙视）”
我：(裂开)
隔壁老王：这么简单你都不行，我来一行贝塞尔 cubic-bezier(0.3, 1.15, 0.33, 1.57) 秒了😎
设计小姐姐：哇哦！（兴奋）好帅！（星星眼🌟）好Q弹！（一脸崇拜😍）
我：“？？？”

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

1️⃣ cubic-bezier 是什么？

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

1transition: all 0.5s ease;
2

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

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

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

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

👉 当 y 超过 1 或小于 0 时，动画值就会冲过终点再回弹，
这就是“回弹感”的核心。

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

想象一个球掉下来：

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

在动画中，这个“过冲”就是 y>1 的部分，
而“回弹”就是曲线回到 y=1 的过程。

🧪 二、一行贝塞尔的魔法

✅ 火箭发射

1<div class="bounce">🚀发射！</div>
2
3<style>
4.bounce {
5 transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
6}
7.bounce:hover {
8 transform: translateY(-500px);
9}
10</style>
11

💡 参数解析：

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

🧩 四、常用贝塞尔参数

🧰 五、调试神器推荐

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

《UI小姐姐要求有“Duang~Duang”的效果怎么办？》 是转载文章，点击查看原文。