如何自定义CSS cubic-bezier 过渡曲线以实现独特动画节奏？

本文共计940个文字，预计阅读时间需要4分钟。

cubic-bezier(x1, y1, x2, y2) 接收四个数字：

• 超出 [0,1] 的 x 值（如 x1 = -0.1 或 x2 = 1.5）会导致 Chrome/Firefox 忽略整个函数，回退到 ease
• y 值超出范围不会导致失效，但可能产生“反向运动”（比如 y1 = 2 让动画先猛往上冲再回落）
• 控制点越靠近左下和右上（如 cubic-bezier(0.42, 0, 0.58, 1)），过渡越接近线性；越靠近左上或右下，缓动越极端

怎么调试 cubic-bezier() 不生效

常见现象：写了 transition: all 0.3s cubic-bezier(0.1, 0.8, 0.9, 0.2);，但动画看起来还是默认的 ease。