css用cubic-bezier()精准控制加速度变化比js更可控，因浏览器原生支持贝塞尔曲线逼近自由落体，transform+timing function组合可稳定实现下落加速、回弹减速，避免top触发重排卡顿，且多段动画链式调用可模拟自然衰减弹跳。
为什么用 animation-timing-function 模拟重力比用 JS 更可控
纯 CSS 实现弹跳的关键不是“画轨迹”，而是用贝塞尔曲线逼近自由落体加速度变化。浏览器原生支持的 cubic-bezier() 能精准控制每一帧的速度——上升段减速快（模拟对抗重力），下落段加速猛（模拟重力加速），这比 JS 手动更新 top 或 transform 值更稳定、更省 CPU。
常见错误是直接套用 ease-in-out，它上下对称，但真实弹跳：下落时间短、冲击感强；回弹时间长、衰减明显。必须拆成多段动画，每段配独立 timing function。
- 第一跳用
cubic-bezier(0.33, 0, 0.22, 0.66)（下落加速） - 回弹用
cubic-bezier(0.55, 0.055, 0.675, 0.19)（上升减速） - 后续每次弹跳高度按 0.7~0.8 比例衰减，timing function 微调避免僵硬
@keyframes 里必须用 transform: translateY() 而不是 top
用 top 触发 layout，动画会卡顿；transform 走合成层，60fps 有保障。更重要的是：重力感依赖“位移非线性”，translateY 配合 cubic-bezier 才能体现加速/减速，而 top 在非 transform 场景下 timing function 行为不可靠。
示例关键帧：
@keyframes bounce {
0% { transform: translateY(0); }
30% { transform: translateY(120px); } /* 最低点，速度最快 */
50% { transform: translateY(80px); } /* 回弹中段，明显减速 */
70% { transform: translateY(40px); }
100% { transform: translateY(0); }
}
注意：百分比位置不是等距的——30% 就到最低点，说明前半程下落占总时间不到一半，这才是重力感来源。
如何让弹跳自然衰减而不是机械重复
CSS 动画本身不支持“动态修改 keyframes”，所以不能在运行时缩放位移值。解决办法是链式调用多个 @keyframes，每段对应一次弹跳，高度逐级降低，并用 animation-delay 错开触发时机。
- 第一跳：100px 高度，duration 0.6s
- 第二跳：70px 高度，duration 0.5s，delay 0.6s
- 第三跳：49px 高度，duration 0.42s，delay 1.1s
- 所有段共用同一个
animation-fill-mode: forwards，避免最后一帧跳回
别用 infinite —— 它会让小球永远弹同样高度，彻底失去物理感。
移动端 Safari 的 transform 渲染 bug 怎么绕过
Safari 15.4 之前版本对 transform: translateY() + cubic-bezier() 组合有插值异常，小球会在最低点“顿一下”。临时解法是加 will-change: transform 强制开启硬件加速，但更稳的方式是补一层 scaleZ(1)：
.ball {
transform: translateY(0) scaleZ(1);
animation: bounce 0.6s cubic-bezier(0.33,0,0.22,0.66);
}
这个 trick 不影响视觉，但能绕过 Safari 的 transform 插值缺陷。iOS 16+ 已修复，但线上仍需兼容旧版本。
真正难的是让三次弹跳后的小球停住时，有微小的横向晃动和形变——那得靠额外加一个 0.05s 的 scaleX 脉冲动画，但多数场景没必要，先保证垂直弹跳真实再说。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
