cubic-bezier() 的 x1、x2 必须在 [0,1] 内，否则被静默降级为 ease；y1、y2 可越界实现弹性效果，但建议控制在 [-0.5,1.5] 内以防跳变；调试时可通过 Chrome 动画面板曲线预览判断 x 值是否越界。
cubic-bezier() 的四个参数不是随便填的数字，x1 和 x2 必须严格落在 [0, 1] 区间内，否则整条声明会被浏览器静默丢弃、降级为 ease；y1 和 y2 可以越界（比如负值或大于 1），这是实现过冲、回弹的唯一合法方式，但超出 [-0.5, 1.5] 就容易在低端设备上跳变。
为什么写了 cubic-bezier() 却没生效
最常见原因是 x1 或 x2 越界。例如：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 值越界了。
- 检查是否被其他 CSS 覆盖：比如父级写了
transition: all 0.3s ease，子级只写transition-duration没写transition-timing-function，就会继承父级 - 确认属性本身支持过渡：如
display、z-index、height（未设overflow: hidden）等无法触发视觉变化，改了也看不出效果 - 避免在简写
transition中混用多个 timing function：transition: width 0.3s cubic-bezier(), height 0.3s;会让后者继承前者的缓动，容易误判
cubic-bezier() 的 y 值越界怎么用才不出问题
y1 和 y2 越界是模拟物理弹性（如按钮按压回弹、卡片悬浮）的必要手段，但必须控制幅度，否则数学上成立，视觉上失控：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 按钮按压回弹推荐：
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.265, 1.55)——y1 = -0.55提供轻微反向启动感，y2 = 1.55是临界值，真机测试过多数机型可稳住 - 避免
y1 < -0.6或y2 > 1.6：尤其在300ms以内短动画中，极易变成“抽搐”，Safari 对负 y 更敏感，iOS 15 之前可能直接 fallback 到linear
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() 控制的是「时间节奏」，不是「运动路径」——哪怕你写 cubic-bezier(0.5, -800, 0.5, 800)，元素也还是直线位移，只是加速度极端夸张而已。要走贝塞尔曲线路径，得换 offset-path 或 SVG，别在 timing function 上死磕轨迹。
