cubic-bezier 无法模拟真实弹簧效果，因其仅为匀速参数化的位置插值，缺乏质量、阻尼等物理量，最多单次过冲；需用多段 keyframes 分阶段拟合衰减振荡。
为什么 cubic-bezier 本身不能模拟弹簧物理效果
直接用 CSS 的 cubic-bezier() 函数画不出真实弹簧动画——它只是四阶贝塞尔曲线，描述的是匀速参数化下的位置插值，没有质量、阻尼、加速度反馈这些物理量。所谓“弹簧效果”，其实是对「过冲 + 衰减振荡」的视觉近似，而 cubic-bezier() 最多只能模拟单次过冲（比如 cubic-bezier(0.17, 0.67, 0.83, 0.67)），无法表达多次来回衰减。
所以别在 DevTools 里反复拖动贝塞尔控制点硬凑“像不像弹簧”；那只是错觉，且在不同持续时间下会失真。
真正可用的替代方案：CSS @keyframes + 多段 cubic-bezier
想在纯 CSS 中逼近弹簧感，得放弃单段贝塞尔，改用关键帧分段拟合振荡衰减趋势。核心思路是：把一次弹簧回弹拆成 3–4 个阶段，每段用不同缓动控制节奏和幅度。
- 第一段（0% → 30%）：快速冲过目标，用
cubic-bezier(0.3, 1.5, 0.7, 1)（y1/y2 > 1 允许过冲） - 第二段（30% → 65%）：反弹回来但未到目标，用
cubic-bezier(0.3, -0.2, 0.7, 0.9)（y1 - 第三段（65% → 90%）：小幅二次过冲，衰减更明显，用
cubic-bezier(0.4, 0.2, 0.6, 0.8) - 最后一段（90% → 100%）：收敛到终点，用
cubic-bezier(0.2, 0.8, 0.4, 1)
注意：各段时长比例不是均等的，前两段要短（加速+峰值），后两段拉长（衰减变慢才显自然）。实际中建议总时长 ≥ 600ms，否则看不出振荡层次。
调试时最容易被忽略的三个限制
CSS 动画的弹簧拟合非常脆弱，稍不注意就崩成抽搐或卡死。这几个点必须手动验证：
-
transform属性必须用translate3d(0,0,0)或will-change: transform触发硬件加速，否则多段关键帧叠加会导致掉帧，振荡变糊 - 所有关键帧的
transform值必须是同一类型（比如全用translateY），混用scale和rotate会让贝塞尔插值在复合空间里严重失真 - DevTools 的贝塞尔可视化工具（如 Chrome 的动画检查器）只显示单段曲线，切到多段
@keyframes后它就失效了——你得靠肉眼观察元素运动节奏，或录屏逐帧看是否在 200ms/400ms/550ms 处有对应幅度的过冲点
什么时候该放弃 CSS，换 JS 物理库
如果你需要：用户拖拽释放后实时计算回弹、根据初始位移动态调整振荡次数、或者和滚动/手势联动响应，那 CSS 方案立刻失效。此时直接上 popmotion 或 framer-motion 的 spring 算法更省事。
它们底层用的是二阶微分方程（mass、damping、stiffness 可配），输出的是每一帧的真实位移值，再喂给 requestAnimationFrame。CSS 的 cubic-bezier 在这里只是个静态快照，连时间导数都没有。
真实弹簧效果的复杂点从来不在“怎么写”，而在“谁来负责更新状态”。CSS 不持有状态，它只播放录制好的动作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
