cubic-bezier()参数必须全在[0,1]内，否则静默降级为ease；x1/x2略超或可侥幸生效，y1/y2越界必失效；transition简写中timing-function须紧随duration，多属性时三者数量须严格一一对应。
cubic-bezier()参数必须全在[0,1]内，否则静默降级为ease
浏览器对cubic-bezier()的容错极低：只要y1或y2超出[0, 1]（比如-0.1或1.2），Chrome/Firefox会直接丢弃该函数，回退到ease；x1或x2略超（如1.05）可能侥幸生效，但不跨浏览器一致。这不是报错，而是静默失效——你改了参数却看不出变化，大概率是这里出问题。
常见错误现象包括动画开头突兀、结尾卡顿、或完全看不出自定义效果。用 Chrome DevTools 的「Animations」面板点开时间函数预览图，若显示为直线而非曲线，说明cubic-bezier()根本没生效。
- 安全写法：坚持用 cubic-bezier.com 生成，它默认锁定输入范围
- 别信“越界=弹性更强”——多数越界值只会让动画变线性，白忙活
- Safari 对负
y值更敏感，cubic-bezier(0.2, -0.3, 0.8, 1.2)在 iOS 15 之前可能直接降级为linear
transition简写中cubic-bezier()必须紧接duration之后
transition是简写属性，顺序和结构直接影响是否生效。单独声明transition-timing-function会被transition简写覆盖，等于白写。
- ❌ 错误：
transition: transform 0.3s;+transition-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); - ✅ 正确：
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时，会继承前一项的值，容易误判
多个transition属性配不同cubic-bezier时数量必须严格对应
当同时过渡多个属性（如transform和opacity），transition-property、transition-duration、transition-timing-function三者数量必须一一匹配，否则浏览器静默截断多余项。
- 例如定义了 3 个
duration但只写 2 个timing-function，第三个属性会回退到默认ease - 写法示例：
transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.2s linear, background-color 0.4s ease-in; - 漏掉某项的缓动函数，不代表它“没动”，而是它用了前一个或默认值，视觉上容易误以为配置失败
想模拟弹跳？cubic-bezier()只是节奏控制器，不是位移生成器
cubic-bezier()只控制「时间 → 进度」映射，不能自动产生物理弹跳。它能让缩放过程带过冲（overshoot），但真正“弹”起来需要配合多段transform状态变化和明确起始值。
- 缺
transform: scale(1)→transition无起始状态，点击没反应 - 漏
transform-origin: center→ 缩放中心偏移，按钮文字被拉扯 -
transition必须写在默认状态（非:active），否则只在鼠标松开时触发一次回弹 - 纯
cubic-bezier()无法实现真实弹跳，它只是让动画节奏“看起来像弹”，底层仍是线性插值
实际最难的不是调参，而是意识到：同一组duration + cubic-bezier()在transform上很顺，在width上可能卡顿——因为后者触发 layout。缓动函数再漂亮，也救不了重排重绘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
