cubic-bezier回弹曲线的本质是通过非常规控制点（y1<0实现起始蓄力，y2>1触发超调回落）制造视觉错觉，并非物理模拟；其效果高度依赖元素属性、容器布局与交互上下文，需手动调试而非套用固定参数。
什么是cubic-bezier回弹曲线的本质
cubic-bezier() 本身不直接“模拟物理”，它只是贝塞尔曲线的四点控制参数。所谓“回弹效果”，其实是用非常规的控制点（比如第二个锚点的 y 值 > 1）制造出动画在终点处“超调再折返”的视觉错觉。浏览器渲染时并不计算弹簧阻尼，全靠你手动调出那个“过冲→回落”的路径。
常见错误是照搬网上搜到的 cubic-bezier(0.68, -0.55, 0.27, 1.55) 这类值——它在某些元素尺寸下看起来像回弹，但换一个 padding 或 transform-origin 就完全失真。
怎么手调出可用的回弹曲线
关键不是记住某组 magic number，而是理解两个控制点的物理意义：
- 第一个控制点
(x1, y1)影响起始加速度：y1 < 0 才能“后撤蓄力” - 第二个控制点
(x2, y2)决定超调程度：y2 > 1 是回弹必要条件，越大超调越猛，但超过 1.8 容易显得假
实际调试建议：
立即学习“前端免费学习笔记（深入）”；
- 从
cubic-bezier(0.4, -0.3, 0.2, 1.6)起手，用 Chrome DevTools 的动画面板拖动控制点实时预览 - 如果回弹太急，减小 y2（比如降到 1.4）；如果起始僵硬，把 y1 往 -0.5 拉一点
- 对
transform: scale()回弹，y2 推荐 1.3–1.5；对top或left位移，y2 可放宽到 1.6–1.7
为什么直接套用会失效？三个典型坑
回弹动画不是“设了 curve 就完事”，它高度依赖上下文：
- 元素有
overflow: hidden时，超调部分被裁剪，回弹变“卡顿”——得临时改overflow: visible或用clip-path配合 - 使用
transform: translateX()+will-change: transform时，部分 Safari 会忽略 y1 < 0 的起始反向，导致无蓄力感 - 在 flex/grid 容器中做
width回弹，浏览器重排开销大，帧率掉得比 curve 本身还狠——优先改用transform: scaleX()
更可控的替代方案：CSS @keyframes + steps()
如果反复调 cubic-bezier() 都达不到想要的“两段式回弹”（比如先快冲、停顿、再慢弹回），不如放弃单条曲线：
@keyframes bounce-in {
0% { transform: scale(0.8); }
60% { transform: scale(1.15); } /* 超调峰值 */
100% { transform: scale(1); }
}
.element {
animation: bounce-in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
这样你能精确控制超调时机和幅度，且兼容性比极端 cubic-bezier() 更稳。不过注意：keyframes 里仍要用一段缓动收尾，否则最后 10% 会生硬。
回弹的真实感，从来不在参数多“准”，而在于它是否匹配元素的重量感和交互反馈节奏。同一个 cubic-bezier(0.5, -0.2, 0.3, 1.4)，用在按钮上很轻快，用在模态框上就显得飘。
