cubic-bezier() 是函数而非属性，须配合 transition-timing-function 或 animation-timing-function 使用；x1/x2 超出 [0,1] 会导致浏览器静默降级为 ease，y1/y2 可越界实现回弹但需控制在 [-0.6,1.6] 内以避免真机失控。
cubic-bezier() 不是“属性”，而是函数，必须配合 transition-timing-function 或 animation-timing-function 使用；写错位置或参数越界，浏览器直接静默降级为 ease，根本不会报错。
为什么写了 cubic-bezier() 却看起来没效果
最常见原因是 x1 或 x2 超出 [0, 1] 区间。比如 cubic-bezier(-0.1, 0.3, 0.9, 0.7)、cubic-bezier(0.4, 0.2, 1.001, 0.8)——Chrome、Firefox、Safari 全部忽略整条声明，computed 样式里显示的仍是 ease。
调试时打开 Chrome DevTools 的「Animations」面板，点开时间函数预览图：如果显示为直线而非曲线，就是明确信号。
- 检查是否被父级
transition覆盖（例如父级写了transition: all 0.3s ease，子级只改了duration没重写timing-function） - 确认目标属性支持过渡（
display、z-index、未设overflow: hidden的height等无法触发视觉变化） - 避免在简写
transition中混用多个 timing function：transition: width 0.3s cubic-bezier(), height 0.3s;会让后者继承前者的缓动，容易误判
想做弹性回弹？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以内短动画中，视觉上极易失控 - Safari 对负
y1更敏感，iOS 15 之前可能直接 fallback 到linear
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 不支持单个动画内不同段落用不同缓动
别信“数学上成立就行”——Safari 对负 y 值更敏感，iOS 15 之前可能直接 fallback；Android WebView 在 y2 > 1.6 时首帧猛冲；这些都不是理论问题，是真实设备上的视觉失控。先用 cubic-bezier.com 拖动确认数值范围再拷贝，比手算或瞎试可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
