cubic-bezier()未生效最常见原因是x1或x2超出[0,1]区间，浏览器会静默丢弃整条声明并回退为ease；y1/y2可合法越界但需严控在[-0.5,1.5]内，否则易导致跳变或抽搐。
为什么写了 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;会让后者继承前者的缓动，容易误判
cubic-bezier() 的 y 值越界怎么用才不出问题
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 < -0.6或y2 > 1.6：尤其在300ms以内短动画中，极易变成“抽搐”，Safari 对负y更敏感
transition 和 @keyframes 里写法差异
语法一样，但作用位置和控制粒度完全不同：
立即学习“前端免费学习笔记（深入）”；
-
transition中直接写在简写里：transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);✅ -
@keyframes中不能把cubic-bezier()写进from/to块内部：to { animation-timing-function: cubic-bezier(); }❌ 无效 - 正确写法是写在调用处：
.box { animation: slide 300ms cubic-bezier(0.2, 0.8, 0.4, 1); }✅ - 想让不同关键帧段落用不同节奏？只能拆成多个独立
@keyframes动画，CSS 不支持单个动画内分段设animation-timing-function
调试时别手敲数字，用工具拖动控制点
人脑很难靠四个小数点想象出曲线形状。直接用 cubic-bezier.com 这类在线工具拖动控制点，实时看预览，再复制参数——它默认锁死 x1/x2 在 [0,1] 内，避免踩坑。
真正难的不是写出一个“看起来酷”的曲线，而是让 y 值越界幅度刚好卡在设备兼容性与视觉张力的平衡点上：多 0.05 可能就抽搐，少 0.1 又不够灵动。真机测试比任何理论都管用，尤其 iOS 和旧版 Android WebView。
