cubic-bezier()未生效最常见原因是x1或x2超出[0,1]区间，浏览器会静默丢弃整条声明并回退为ease；需确保x值守界、y值严控在[-0.5,1.5]内，并按正确顺序写入transition简写中。
为什么写了cubic-bezier()却没生效
最常见原因是x1或x2超出[0, 1]区间，比如cubic-bezier(-0.1, 0.2, 0.8, 1)或cubic-bezier(0.3, 0.1, 1.05, 0.9)。浏览器（Chrome/Firefox/Safari）会静默丢弃整条声明，computed样式里显示为ease，不报错也不警告。
用 Chrome DevTools 打开「Animations」面板，点开时间函数预览图：如果显示为直线而非曲线，基本就是x值越界了。
- 检查是否被父级
transition覆盖：例如父级设了transition: all 0.3s ease，子级只写transition-duration没写transition-timing-function，就会继承父级 - 确认属性支持过渡：
display、z-index、未设overflow: hidden的height等无法触发视觉变化 - 避免在简写
transition中混用多个 timing function：transition: width 0.3s cubic-bezier(), height 0.3s;会让后者继承前者的缓动，容易误判
transition里cubic-bezier()必须紧接duration写
transition是简写属性，顺序和结构直接影响是否生效。正确写法是把cubic-bezier()作为transition-timing-function值，紧接在transition-duration之后。
错误示例：transition: transform 0.3s; transition-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);——后者会被忽略，因为transition简写会覆盖单独声明的子属性。
- ✅ 正确：
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.4, 1); - ✅ 多属性不同缓动：
transition: width 0.3s ease-in, height 0.3s cubic-bezier(0.4, 0.2, 0.6, 0.8); - ⚠️ 注意：后一项未指定timing-function时，会继承前一项的值，容易误判
y1/y2越界怎么用才不出问题
y1和y2越界是实现弹性、过冲的唯一合法方式，但幅度必须严控：超出[-0.5, 1.5]就容易在低端设备上跳变或抽搐。
- 按钮按压回弹推荐：
cubic-bezier(0.2, 0.7, 0.4, 1.2)——y2 = 1.2是安全上限，再高（如1.6）在 Android WebView 或 Safari 16.3 以下可能首帧猛冲 - 卡片悬浮带弹性推荐：
cubic-bezier(0.68, -0.55, 0.27, 1.55)——y1 = -0.55提供轻微反向启动感，y2 = 1.55是真机测试过的临界值 - 避免
y1 或<code>y2 > 1.6：尤其在300ms以内短动画中，极易变成“抽搐”，Safari 对负y更敏感
hover和click该用不同cubic-bezier曲线
CSS transition不会自动区分触发方式，必须靠 class 切换或伪类分别定义。混用同一transition-timing-function会让交互节奏混乱。
- 悬停动效建议用
cubic-bezier(0.22, 0.61, 0.36, 1)：加速快，0.3s内完成，避免用户移开鼠标时还在动 - 点击反馈推荐
cubic-bezier(0.34, 1.56, 0.64, 1)：开头稍缓，中间冲力强，结尾带轻微回压感，模拟真实按压 - 不要用
ease-in做:hover——起始太慢，用户会觉得“卡了一下才开始”
真正影响手感的不是参数多精确，而是y值越界是否可控、x值是否守界、以及不同交互场景是否分开了缓动逻辑——这些细节一旦漏掉，再漂亮的贝塞尔曲线也救不回生硬的手感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
