cubic-bezier()可逼近弹簧效果但需确保x₁、x₂∈[0,1]，否则触发警告或降级；模拟抖动宜用@keyframes+steps()分段控制；spring()函数兼容性差且参数易误用；优先对transform/opacity做弹簧动画以避免强制重排。
用 cubic-bezier() 精确控制弹簧感
浏览器原生不支持物理引擎式的弹簧动画，但 cubic-bezier() 可以逼近弹簧回弹效果。关键不是“像不像”，而是参数是否在可接受的数值范围内——超出 [0, 1] 的 x 坐标（即前两个参数）会让过渡在时间轴上“倒流”，导致卡顿或跳变。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用在线工具（如 cubic-bezier.com）拖动控制点，观察曲线斜率变化：起始斜率大 → 初始加速度强；结束斜率小且为负 → 回弹衰减感
- 典型弹簧值如
cubic-bezier(0.68, -0.55, 0.27, 1.55)是常见起点，但注意第二参数-0.55已小于 0，部分旧版 Safari 会静默降级为ease - 不要直接复制设计稿给的“弹簧代码”，先验证是否所有参数都在合法范围：x₁ 和 x₂ 必须 ∈ [0, 1]，否则 Chrome 会警告
Invalid cubic-bezier timing function
用 @keyframes + steps() 模拟非连续弹簧抖动
纯 cubic-bezier() 是平滑曲线，无法表现弹簧到位前的微小反复抖动。这时得放弃“单次过渡”，改用关键帧分段控制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把一次弹簧过程拆成 3–4 段：快速冲过目标 → 回退 → 再小幅越过 → 最终停稳
- 每段用
animation-timing-function: ease-out或线性，避免叠加贝塞尔导致节奏失控 - 若需精确帧数控制（比如 12 帧内完成抖动），用
steps(12, end)配合animation-iteration-count，但注意steps()不支持小数帧，抖动粒度受限
JavaScript 驱动时慎用 spring()（CSS transition-timing-function）
CSS 新增的 spring(mass, stiffness, damping, velocity) 函数看似更直观，但它目前仅 Chromium 120+ 支持，且行为与 Framer Motion 或 Web Animations API 的弹簧模型不一致——它的 velocity 单位是 px/ms，而实际动画中初始速度往往难准确估算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要在需要兼容 Firefox 或 Safari 的项目里用
spring()，连@supports (transition-timing-function: spring(1, 100, 10, 0))的检测都可能因解析失败而返回 false - 如果 JS 已在用
Element.animate()，优先用effect: new KeyframeEffect(...)+ 自定义弹簧插值器，比依赖 CSS 新函数更可控 -
spring()的damping并非阻尼比（0–1），而是“阻尼系数”，值越大反而越不阻尼，容易调出无限振荡效果
性能陷阱：高频率重排触发的弹簧失效
弹簧动画看起来“断掉”或“突然跳到终点”，大概率不是曲线写错了，而是动画过程中触发了强制同步布局（forced synchronous layout）。比如在 scroll 事件里修改一个正在用弹簧过渡的 transform 元素的 top，浏览器被迫中止当前过渡去计算 layout。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只对
transform和opacity做弹簧过渡，这两者能走合成层，不触发布局重排 - 避免在
requestAnimationFrame回调里读取offsetTop、getBoundingClientRect()后立刻写style.transform，中间加个setTimeout(() => {}, 0)断开读写链 - 用 Chrome DevTools 的 Rendering 面板勾选 “Paint Flashing” 和 “FPS Meter”，确认弹簧动画期间没有紫色/红色的重排块
弹簧曲线最难的不是调参，是判断该不该用它——很多所谓“弹簧需求”，其实只是用户想感知状态变化，用 ease-in-out 加快起始、放缓结尾，比硬套 cubic-bezier(0.6, -0.2, 0.2, 1.2) 更可靠。
