cubic-bezier()无法实现真实物理弹性，因无状态、不记录速度、不模拟阻尼；y1/y2超[0,1]会导致浏览器降级或失真，应改用scroll-behavior、framer motion spring或分段transition。
纯 cubic-bezier() 无法实现真实物理弹性——它没有状态、不记录速度、不模拟阻尼，只能“画一条看起来像弹的曲线”。你要的是回弹、衰减、中断响应，不是视觉拟合。
为什么cubic-bezier(0.175, 0.885, 0.32, 1.275)动起来像抽搐
常见错误现象：cubic-bezier() 的 y1 或 y2 超出 [0, 1] 范围时，Chrome 可能渲染但精度下降，Safari 会 clamp（截断为 0 或 1），Firefox 可能失真或静默降级为 ease。你写的 1.275 在 Safari 里实际变成 1，整段超调消失；而 y1 = 0.885 接近 1，导致起始斜率极小，动画前 20% 几乎不动，后面猛冲——人眼感知就是“卡一下再爆弹”。
-
x1和x2可略超 [0,1]（如−0.05或1.05），浏览器大多容忍 -
y1或y2一旦 1，主流浏览器不再保证行为一致，**不是“更弹”，而是“不可控”** - 用 Chrome DevTools → Animations 面板点开时间函数预览图，若显示为直线而非曲线，说明已降级
transition中写cubic-bezier()的三个硬限制
很多人把 cubic-bezier() 当万能加速器，却栽在基础规则上：
- 它只能作用于整个过渡过程，不能分段控制（比如“前半段慢入，后半段弹出”需拆成两个 transition 或改用 @keyframes）
- 不能写在
@keyframes的from/to块内部，必须挂到animation属性或独立的animation-timing-function上 - 和
transition-property: all搭配时，所有变化属性共用同一条曲线——如果同时动opacity和transform，而它们对缓动敏感度不同，就会出现“位置早到、透明晚到”的割裂感
想模拟弹性，该换什么方案
如果你的目标是「松手后继续滚动并缓慢停住」「点击后轻微回弹」「拖拽释放时按质量衰减」，cubic-bezier() 不是参数调得不够狠，而是模型错了：
- 原生滚动弹性：用
scroll-behavior: smooth+element.scrollTo({ top, behavior: 'smooth' })，浏览器底层走物理引擎 - JS 驱动弹性：Framer Motion 的
spring（支持damping、mass、stiffness）、React Spring、or CSS@property+spring()（实验性，仅 Chromium 120+） - 轻量替代：用两段
transition模拟“主位移 + 微回弹”，例如先transform: translateY(-10px)，再加一个延迟50ms、持续150ms的transform: translateY(0)，配合cubic-bezier(0.25, 0.46, 0.45, 0.94)
真正容易被忽略的点：弹性动效的可信度，不取决于超调多高，而在于**衰减节奏是否匹配人类对质量与惯性的直觉**。用贝塞尔“画弹”就像用折线拟合正弦波——能看，但一交互就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
