cubic-bezier(x1,y1,x2,y2)四值须全在[0,1]内，y1/y2越界会导致静默降级为ease；x1/x2可略超但非推荐；transition中全局生效，@keyframes中需写在animation属性上而非关键帧内；纯cubic-bezier无法实现真实弹跳。
animation-timing-function用cubic-bezier时，参数怎么填才不乱跳
直接说结论：cubic-bezier(x1, y1, x2, y2) 的四个值必须全在 [0, 1] 范围内，超出就失效（浏览器会回退到 ease），不是报错，而是静默降级——这是最常被忽略的坑。
常见错误现象：动画开头猛冲、结尾卡顿、或完全看不出变化，大概率是手误写了 cubic-bezier(0.2, -0.1, 0.8, 1.3) 这种带负数或超 1 的值。虽然 CSS 规范允许超出范围（用于实现“弹性”效果），但主流浏览器（Chrome/Firefox/Safari）目前只接受 y1 和 y2 在 [0, 1] 内；x1 和 x2 倒是可以略超（如 0.1, 1.2），但一旦 y 越界，整条贝塞尔曲线就被丢弃。
- 调试建议：用 Chrome DevTools 的动画检查器（Animations tab），点开时间函数预览图，如果显示为一条直线而非曲线，说明
cubic-bezier没生效 - 安全写法：坚持用在线工具生成，比如 cubic-bezier.com，它默认锁死输入范围
- 别信“越界=更夸张”，实际中多数越界值只会让动画变线性，白忙活
transition和@keyframes里用cubic-bezier的区别在哪
核心区别不在语法，而在「控制粒度」：transition 只能对整个过渡过程指定一个全局缓动，而 @keyframes 允许每个关键帧之间独立设 animation-timing-function（通过 animation-timing-function 或 ease 等关键字，但不能直接写 cubic-bezier() 到单个 to 块里）。
也就是说：cubic-bezier 可以用在 transition-timing-function，也能用在 @keyframes 的 animation-timing-function 属性上，但它作用的是「该关键帧段落的整体节奏」，不是某个属性的局部缓动。
-
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);✅ 合法，控制整个 transition -
@keyframes slide { from { opacity: 0; } to { opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); }❌ 无效，animation-timing-function不能写在from/to块内部 - 正确写法：
@keyframes slide { from { opacity: 0; } to { opacity: 1; } } .box { animation: slide 300ms cubic-bezier(0.2, 0.8, 0.4, 1); }
为什么cubic-bezier(0,0,0.58,1)看起来像ease-in-out，但又不太一样
因为 ease-in-out 是规范定义的固定值：cubic-bezier(0.42, 0, 0.58, 1)，你写的 (0,0,0.58,1) 实际是起点斜率为 0（平缓开始），但第一控制点落在左下角，导致前半段比标准 ease-in-out 更“拖”，视觉上启动更慢、中间更陡——这属于参数微调带来的节奏偏移，不是 bug。
这种差异在快速动画（1s）或需要精确匹配设计稿时，就会暴露：比如 Figma 导出的动效常带定制贝塞尔值，照抄时少看一位小数（0.42 写成 0.4）就可能让入场显得生硬。
- 查规范值：MDN 上
ease-in-out条目明确写着对应贝塞尔坐标 - 对比技巧：把两个
cubic-bezier放进同一动画，用 2s 时长 + 循环播放，肉眼比对起始/终止加速度 - 兼容性注意：IE 不支持
cubic-bezier（只认关键字），如果还要兼容，得用@supports (animation-timing-function: cubic-bezier(0,0,0.58,1))做降级
想模拟物理弹跳，只靠cubic-bezier够吗
不够。纯 cubic-bezier 是三次样条曲线，只能描述单调加速/减速过程，无法表达「反弹」这种多峰运动（比如球落地后弹起两次再停住）。它最多能伪造一次“过冲+回弹”的假象（如 cubic-bezier(0.2, 0.8, 0.4, 1.4)），但那是靠 y 越界触发的未定义行为，不同浏览器渲染结果不一致，且无法控制反弹次数和衰减。
真正做弹跳，得靠 @keyframes 手动拆解阶段：落地 → 压缩 → 第一次弹起 → 下落 → 第二次弹起 → 停止，并给每段配不同缓动（比如压缩段用 ease-in，弹起段用 ease-out）。
- 捷径方案：用
spring时序函数（animation-timing-function: spring(1, 80, 10, 0)），但目前仅 Safari 支持，Chrome/Firefox 还在实验阶段 - 务实做法：用 JS 库（如
popmotion或framer-motion）驱动，CSS 只负责基础位移，弹跳逻辑交给 JS 计算并写入transform - 最容易被忽略的一点：贝塞尔曲线控制的是「进度 vs 时间」关系，不是「位置 vs 时间」——它不感知物理量，所以别指望调几个数就能凑出真实重力效果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
