cubic-bezier() 的四个参数定义贝塞尔曲线的两个控制点坐标，x1/x2必须在[0,1]内，否则被忽略退为ease；y值可越界实现回弹等效果，调试推荐Chrome动画检查器拖动预览。
为什么 cubic-bezier() 的四个数值总调不出想要的效果
因为多数人把 cubic-bezier(x1, y1, x2, y2) 当成“起始/结束速度控制”，其实它定义的是贝塞尔曲线的两个控制点坐标，而横轴（x）必须严格在 [0, 1] 范围内——x1 或 x2 超出这个范围会导致浏览器忽略整个函数，退回到 ease 行为，但不报错，极难排查。
-
y1和y2可以超出[0, 1]（比如cubic-bezier(0.2, -0.3, 0.8, 1.6)），实现回弹或过冲效果 - 常见误区：用
cubic-bezier(0, 0, 1, 1)模拟线性动画——这其实是无效写法，应改用linear或cubic-bezier(0, 0, 1, 1)在部分旧版 Safari 中会被拒绝 - 调试建议：在 Chrome DevTools 的动画检查器里点击时间函数右侧的齿轮图标，可拖动控制点实时预览，比手调数值高效得多
哪些场景必须用 cubic-bezier 而不是预设关键词
当动画需要表达物理感或品牌动效语言时，ease、ease-in-out 这类关键词颗粒度太粗。例如模拟“轻拂展开”的菜单，需缓慢启动 + 快速中段 + 温和收尾；又或者按钮按压反馈要求明显“下沉感”，就得让前半程位移加速远超默认 ease-in 的程度。
- 卡片悬停上浮 + 阴影扩散：用
cubic-bezier(0.17, 0.67, 0.15, 0.99)（类似ease-out但更早进入减速） - 加载指示器旋转节奏：配合
animation-timing-function使用cubic-bezier(0.33, 1.05, 0.5, 1)让转速先冲高再缓冲停住 - 避免在
@keyframes内部重复定义：时间函数应写在animation或transition属性上，而非每个关键帧里
cubic-bezier() 在不同 CSS 属性上的表现差异
同一段贝塞尔函数，在 transform、opacity、height 上的观感可能完全不同——这不是 bug，而是插值对象的数值空间和人眼敏感度不同导致的。比如 height 动画中微小的初速度变化会立刻被感知为“卡顿”，而 transform: translateY() 因硬件加速更平滑，容忍度更高。
- 对
opacity：推荐用 y 值较平缓的曲线（如cubic-bezier(0.25, 0.46, 0.45, 0.94)），避免暗闪 - 对
width/height：慎用负 y 值（如回弹），容易触发重排，且在 flex/grid 容器中行为不可预测 - 对
transform：可大胆使用高 y 值（如cubic-bezier(0.2, 0.9, 0.5, 1.2)），GPU 加速下性能影响极小
/* 示例：带品牌感的按钮悬停 */
.button {
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}真正难的不是写出合法的 cubic-bezier()，而是理解它如何与具体属性、渲染管线、用户预期相互作用。多在真实设备上测，少依赖设计稿里的“理想曲线”。
立即学习“前端免费学习笔记（深入）”；
