cubic-bezier() 动画跳得不自然，根本原因是它仅是无状态的数学插值函数，无法模拟真实弹性所需的物理阻尼与惯性；它只能视觉拟合超调曲线，不能实现回弹、衰减或交互中断响应。
为什么 cubic-bezier() 动画跳得不自然？
根本原因不是贝塞尔曲线写错了，而是你把「弹性感」误解成了「多段加速」。真正的弹性动效（比如 iOS 的回弹、Material 的 fling）需要模拟物理阻尼和惯性，cubic-bezier() 本身是纯数学插值函数，没有状态、不记忆前一帧——它只能拟合一段“看起来像弹”的曲线，不能真正计算反弹。
常见错误现象：transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 看起来开头猛冲、结尾超调，但实际运行时在 Chrome DevTools 的动画面板里会发现：它只是线性采样了那条曲线，没有回弹逻辑，更不会因用户交互中断后自动衰减。
- 别用
cubic-bezier()模仿弹簧；它适合微动效（按钮按压、菜单滑入），不适合真实弹性 - 如果目标是「松手后继续滚动并缓慢停住」，该用
scroll-behavior: smooth+ 自定义ScrollToOptions.behavior: 'smooth'，或 JS 库如framer-motion的spring驱动器 - 浏览器对超出 [0,1] 范围的 y 值（如上面例子中的
1.275）支持不一致：Safari 会 clamp，Firefox 可能失真，Chrome 允许但渲染精度下降
怎么写出视觉上「有弹性感」的 cubic-bezier()？
关键不是参数多神奇，而是控制节奏断点。人眼识别弹性，靠的是「快进 → 缓出 → 微超调 → 回稳」这四个阶段的时序压缩。用两个贝塞尔段拼接太重，单段就靠 y 值破界+x 值偏移来制造错觉。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 起始点 x 小于 0.2（比如
0.175），让动画前 15% 时间内位移量快速堆叠，形成「弹射感」 - 终点 y 大于 1（如
1.275），制造视觉超调，但必须配一个 >0.5 的终点 x（如0.32），否则超调太急会像抽搐 - 避免中间控制点 y -0.1），这会导致动画倒退一帧，在低帧率设备上明显卡顿
- 推荐组合（已实测在 Chrome/Firefox/Safari 下观感较稳）：
cubic-bezier(0.215, 0.61, 0.355, 1)—— 用于卡片展开；cubic-bezier(0.25, 0.46, 0.45, 0.94)—— 用于轻量悬停缩放
transform 和 opacity 用同一组 cubic-bezier() 为什么效果割裂？
因为它们的感知权重不同：opacity 是线性感知（人眼对透明度变化敏感度基本恒定），而 transform（尤其是 scale 或 translate）是空间感知，受上下文尺寸、容器比例、视口距离影响极大。同一组贝塞尔参数套在两者上，视觉节奏必然不匹配。
使用场景差异：
- 给
opacity用缓入缓出（如cubic-bezier(0.4, 0, 0.2, 1)），避免闪烁感 - 给
transform用带超调的曲线（如上文0.215, 0.61, 0.355, 1），强化动态感 - 如果同时动画两者，不要共用一个
transition声明，拆成两条：transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) - 注意：Safari 对多属性
transition的解析偶尔有竞态，稳妥做法是用will-change: transform, opacity提前声明
用 CSS @keyframes 实现弹性动效比 cubic-bezier() 更可靠吗？
不一定。@keyframes 本质还是离散关键帧插值，默认用 ease，你手动写 5–7 帧去模拟弹性，反而更容易暴露帧率瓶颈——尤其在低端安卓机上，60fps 都难保，12 帧动画直接掉到 30fps，超调变拖影。
真正值得考虑 @keyframes 的情况只有两个：
- 需要精确控制中间某一帧的样式（比如第 3 帧强制加个
scale(1.05)再回落） - 动画需响应用户手势（如拖拽中实时更新
@keyframes的from/to），这时得配合AnimationTimeline和DocumentTimelineAPI - 绝大多数「弹性加载动效」场景，用
animation: bounce 0.6s cubic-bezier(0.28, 0.84, 0.42, 1)就够了，别硬塞 10 行 @keyframes - 额外成本：每个 @keyframes 名称都会注册进全局 CSSOM，大量自定义动画名可能触发内存泄漏（尤其单页应用反复挂载/卸载组件时）
复杂点在于：你以为调好了一组贝塞尔参数就能复用，但实际要适配深色模式切换、字体加载延迟、甚至用户开了「减少动画」系统偏好——这些都会让同一段 cubic-bezier() 在不同上下文里观感突变。最省事的做法，是把弹性阈值做成 CSS 变量，由 JS 根据 window.matchMedia('(prefers-reduced-motion)') 动态改写。
