cubic-bezier() 的 x1、x2 必须严格在 [0,1] 内，越界则静默降级为 ease；y1、y2 可越界实现弹性效果，但建议控制在 [-0.5,1.5] 以内；transition 中直接使用，@keyframes 中需写在动画调用处而非关键帧内。
cubic-bezier(x1, y1, x2, y2) 的 x 值越界直接失效
写了 cubic-bezier(-0.1, 0.3, 0.9, 0.7) 却没效果？大概率是 x1 或 x2 超出 [0, 1]。浏览器不会报错，而是静默降级为 ease，computed 样式里也看不出异常。
Chrome DevTools 的「Animations」面板里点开时间函数预览图，如果显示为直线而非曲线，就是明确信号。
-
x1和x2必须严格 ≥ 0 且 ≤ 1；-0.01、1.001都不行 - 常见手误：复制粘贴时多了一个负号，或小数点后位数错乱（比如把
0.265写成265） - 别依赖“试出来”，先用 cubic-bezier.com 拖动确认数值范围再拷贝
y1 和 y2 越界是实现弹性效果的唯一合法方式
y1 和 y2 可以且必须越界才能做出回弹、过冲——但不是越夸张越好。超出 [-0.5, 1.5] 就容易在低端 Android WebView 或 Safari 16.3 以下机型上首帧猛冲或抽搐。
- 按钮按压回弹推荐：
cubic-bezier(0.2, 0.7, 0.4, 1.2)——y2 = 1.2是安全上限 - 卡片悬浮推荐：
cubic-bezier(0.68, -0.55, 0.265, 1.55)——y1 = -0.55提供启动反向感，y2 = 1.55是真机验证过的临界值 - 避免
y1 或 <code>y2 > 1.6，尤其在300ms以内短动画中，视觉上极易失控
transition 和 @keyframes 中写法完全不同
语法一样，但位置错了就完全不生效。很多人把 cubic-bezier() 塞进 @keyframes 的 to 块里，结果白写。
-
transition中直接写简写里：transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); -
@keyframes中不能写进关键帧内部：to { animation-timing-function: cubic-bezier(...); }❌ - 正确写法是写在调用处：
.box { animation: slide 300ms cubic-bezier(0.2, 0.8, 0.4, 1); } - 想分段控制节奏？只能拆成多个独立
@keyframes，CSS 不支持单个动画内不同段落用不同缓动
别用 JS 手算贝塞尔，也别信“数学上成立就行”
有人抄了 JS 实现的 cubicBezier(p1x, p1y, p2x, p2y) 函数去生成缓动值，再喂给 CSS —— 这毫无必要，还可能引入精度误差或性能开销。
- CSS 引擎原生支持
cubic-bezier()，直接写进样式最稳 - JS 实现仅适合需要动态插值（如 Canvas 动画、滚动跟随）等特殊场景
- 所谓“数学上成立”，不等于浏览器渲染成立；Safari 对负
y1更敏感，iOS 15 之前可能直接 fallback 到linear - 真正要调试复杂曲线，就打开 DevTools 动画面板拖动控制点，比手调四个小数直观十倍
transition: all 0.3s ease 覆盖子级声明，或者对 height、display 这类不支持过渡的属性硬加 cubic-bezier——前者让你改了也不生效，后者根本不会触发动画。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
