linear() 无法模拟弹跳缓动，因其仅支持匀速线性插值，而弹跳需多次减速-反向加速-衰减的非对称曲线；必须使用 cubic-bezier()（如(0.25,0.46,0.45,0.94)）或 @keyframes 多段定义。
linear() 函数本身不能模拟弹跳缓动——它只支持匀速变化，所有关键帧之间是严格线性的插值。想实现弹跳效果，必须用 cubic-bezier() 或 @keyframes 配合多段非线性动画。
为什么 linear() 根本不适用于弹跳
linear() 的设计目标就是消除加速度：它把整个时间轴等分，每段位移都均匀推进。而弹跳的本质是多次减速→反向加速→衰减，需要至少 4 个控制点来描述回弹的非对称曲线。浏览器解析 linear() 时甚至不会读取任何贝塞尔参数，传进去的数字会被直接忽略。
用 cubic-bezier() 拟合基础弹跳的常见写法
一个较贴近真实弹跳（单次触底反弹）的贝塞尔曲线是 cubic-bezier(0.25, 0.46, 0.45, 0.94)。这不是物理公式推导结果，而是通过动画工具反复调试出的视觉近似：
- 第一组值
0.25, 0.46控制起始阶段：缓慢上升（模拟重力下落末段减速） - 第二组值
0.45, 0.94控制反弹段：先快速上冲，再明显拖尾（模拟弹性衰减） - 注意：x 坐标必须在 [0,1] 区间，y 坐标可超出（如
0.94合法，1.2也合法，会产生成分过冲） - 该曲线无法表现多次弹跳；要两弹，得拆成两个
@keyframes阶段或叠加多个cubic-bezier()片段
真正可控的弹跳：用 @keyframes 手动定义多阶位移
当需要精确控制每次触地高度、延迟和衰减率时，硬编码关键帧更可靠。例如模拟三次弹跳：
@keyframes bounce {
0% { transform: translateY(0); }
30% { transform: translateY(-200px); } /* 第一跳峰值 */
45% { transform: translateY(-120px); } /* 第二跳峰值，高度衰减 */
60% { transform: translateY(-60px); } /* 第三跳 */
80% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
要点：
- 百分比位置决定时间分配，不是匀速；30% 处达到最高点，说明前半程加速快、后半程减速慢
- 每个
transform值需根据容器尺寸手动计算，无法自动适配不同屏幕 - 若配合
animation-timing-function: ease-out使用，会覆盖关键帧内插值逻辑，导致曲线失真
弹跳动画最难的从来不是写出第一帧，而是让第三跳的余震幅度、持续时间和停顿感符合人眼对“真实物体”的预期——这往往需要在 Chrome DevTools 的 animation 面板里逐帧拖动调试，而不是靠套用某个“万能贝塞尔值”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
