cubic-bezier() 是四参数贝塞尔函数，用于定义过渡或动画的速度变化曲线，参数为 cubic-bezier(x1,y1,x2,y2)，x 值须在 0–1 范围内，y 值可略超限以实现超调；它控制节奏而非位移，斜率决定快慢，负斜率可产生回退效果；transition 中单次生效、不可分段，animation 中可通过 @keyframes 分段应用不同曲线；常见错误包括 x 超界导致降级为 ease、简写覆盖 timing-function、DevTools 预览未重放等；多数场景用 ease-in/out 即可，仅当用户感知生硬时才需精细调节。
什么是 cubic-bezier()，它真能控制过渡节奏？
cubic-bezier() 不是“高级动画开关”，它就是一个四参数的贝塞尔函数，用来定义 transition-timing-function 或 animation-timing-function 的速度变化曲线。浏览器只认这四个数：cubic-bezier(x1, y1, x2, y2)，其中 x1/y1 是起点控制点，x2/y2 是终点控制点，所有值必须在 0–1 范围内（超出会失效或被截断）。
常见误区是以为调大 y 值就能“跳得更高”——其实 y 控制的是“垂直方向的速度比例”，不是位移；真正影响动画观感的是曲线斜率变化：斜率陡 → 快，平缓 → 慢，负斜率 → 回退（比如弹跳前的压缩）。
怎么选对四个数？别靠猜，用真实场景反推
与其死记“ease-in-out 是 0.42,0,0.58,1”，不如按行为反查参数：
- 想要“先慢后快再慢”的自然入场？用
cubic-bezier(0.25, 0.46, 0.45, 0.94)（接近 Material Design 的标准入场） - 模拟按钮按下的“压感反馈”？需要开头加速 + 结尾明显减速，试试
cubic-bezier(0.18, 0.89, 0.32, 1.27)（注意y2 > 1合法，表示短暂超调） - 做下拉刷新的弹性回弹？必须允许
y值 1，例如cubic-bezier(0.34, 1.56, 0.64, -0.22)，但要小心：safari 对负y支持不稳定，ios 15 之前可能直接 fallback 到linear
transition 和 animation 里用 cubic-bezier() 有啥区别？
语法一样，但行为逻辑不同：
立即学习“前端免费学习笔记（深入）”；
-
transition中，cubic-bezier()只作用于单次状态切换（如 hover 进出），且无法分段 —— 你不能让前 30% 用一个曲线、后 70% 换一个 -
animation中，可以用@keyframes配合多个cubic-bezier()分段控制，比如：@keyframes slideIn { 0% { transform: translateY(-20px); } 60% { transform: translateY(5px); animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); } } - 性能上没差别，但
transition更轻量；而复杂节奏必须用animation+ 多段贝塞尔，否则写不出来
调试时最常踩的三个坑
这些错误不会报错，但效果完全不对：
-
x1或x2超出 [0,1] 范围（比如写成cubic-bezier(-0.1, 0.2, 1.3, 0.8)）→ 浏览器静默忽略整个 timing function，降级为ease - 在
transition简写中覆盖了 timing function：例如写了transition: all 0.3s;，后面又加transition-timing-function: cubic-bezier(...);—— 后者会被前者覆盖，必须写成完整简写：transition: all 0.3s cubic-bezier(...); - 用 chrome DevTools 的动画检查器时，点开 timing function 面板看到的“可视化曲线”是归一化后的，但实际生效的仍是那四个原始数值；改完参数记得点「重放」，否则预览不刷新
真正难的不是写出一条漂亮曲线，而是判断该不该用它——多数交互只需 ease-out 或 ease-in；只有当用户感知到“卡顿”“生硬”或“没反馈”时，才值得花时间调这四个数。