cubic-bezier()参数必须全在[0,1]内，否则静默降级为ease；x1/x2略超或y1/y2越界均导致失效，chrome/firefox回退ease，safari更敏感可能降级linear；正确写法是简写中紧接duration后声明，@keyframes中须在外层设timing-function。
cubic-bezier()参数必须全在[0,1]内，否则静默降级为ease
浏览器对cubic-bezier()的容错机制很隐蔽：只要y1或y2超出[0,1]（比如-0.1或1.2），Chrome/Firefox会直接丢弃该函数，回退到ease；x1或x2略超（如1.1）可能侥幸生效，但不保证跨浏览器一致。
常见错误现象包括动画开头突兀、结尾卡顿、或完全看不出自定义效果——十有八九是参数越界。用 Chrome DevTools 的「Animations」面板点开时间函数预览图，若显示为直线而非曲线，说明cubic-bezier()根本没生效。
- 安全写法：坚持用 cubic-bezier.com 生成，它默认锁定输入范围
- 别信“越界=弹性更强”，实际中多数越界值只会让动画变线性
- Safari 对负
y值更敏感，cubic-bezier(0.2, -0.3, 0.8, 1.2)在 Safari 可能直接降级为linear
transition里写cubic-bezier()要放在简写属性末尾
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时，会继承前一项的值，容易误判
Q弹缩放动画必须配多段transform + 合理的cubic-bezier()
单靠cubic-bezier(0.2, 0.8, 0.4, 1.4)并不能自动产生Q弹效果。它只是让缩放过程带过冲（overshoot），真正“弹”起来需要配合:active状态下的多段transform变化。
关键前提是按钮默认要有明确起始值：transform: scale(1);，且transform-origin: center;避免缩放中心偏移导致文字拉扯。
- 缺
transform: scale(1)→ transition 无起始状态，点击没反应 - 漏
transform-origin→ 缩放中心不在按钮中心，视觉错位 -
transition必须写在默认状态（非:active），否则只在鼠标松开时触发一次回弹 - “Q弹”本质是
scale(1) → scale(0.95) → scale(1.05) → scale(1)，单次scale(0.95)配该贝塞尔反而怪异
@keyframes里不能把cubic-bezier()写进from/to块
cubic-bezier()在@keyframes中只能作用于整个动画片段，不能绑定到某个关键帧内部。它必须通过animation简写属性或animation-timing-function单独声明，位置在@keyframes规则外部。
错误写法：to { opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); }——该行被忽略，语法无效。
- ✅ 正确：
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }+.box { animation: fade 300ms cubic-bezier(0.2, 0.8, 0.4, 1); } - ⚠️
transition只能全局控制一个过渡节奏，而@keyframes允许分段设不同缓动（但每段仍需独立animation声明） - 想实现“先快后弹”，得拆成两个
@keyframes动画或用 JavaScript 控制关键帧时机
cubic-bezier()参数越界后的静默失效——没有报错，没有警告，只有动画“看起来不对劲”。调试时第一反应不该是换曲线，而是打开 DevTools 确认 computed 样式里transition-timing-function是否真显示你写的值。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
