真实跳动需缩放与位移组合：0%原态、50%触底压缩（scale(0.9,0.7) translateY(5px)）、70%回弹过冲（scale(1.05,1.05) translateY(-25px)）、100%缓冲归位，并配cubic-bezier(0.22,0.61,0.36,1)及will-change优化。
用 @keyframes 定义跳动动画的关键帧
跳动效果本质是垂直方向的缩放 + 位移组合，单纯用 transform: scale() 或 translateY() 都会显得生硬。真正自然的“跳”需要先压缩（模拟触地），再快速回弹并略超原始高度，最后缓冲回落。
常见错误是只写两个关键帧：0% { transform: translateY(0); } 和 100% { transform: translateY(-20px); } —— 这只是上移，不是跳动。
-
0%：原始状态，transform: scale(1, 1) translateY(0) -
50%：触底压缩，transform: scale(0.9, 0.7) translateY(5px)（注意 Y 是向下！） -
70%：回弹过冲，transform: scale(1.05, 1.05) translateY(-25px) -
100%：缓冲归位，transform: scale(1, 1) translateY(0)
给图标元素绑定动画时必须设 display: inline-block 或 block
transform 在 inline 元素（比如默认的 <i>、<span>）上虽能生效，但 transform-origin 和动画锚点常会偏移，导致跳动中心漂移。尤其当图标嵌在文字行内时，基线对齐会让跳动看起来“被拽着往上提”。
解决方法很简单：强制提升显示层级。
立即学习“前端免费学习笔记（深入）”；
- 加
display: inline-block，再配vertical-align: middle对齐文字 - 或直接用
display: block+margin: 0 auto居中（适合独立图标） - 避免用
float或position: absolute——会脱离文档流，影响布局稳定性
animation-timing-function 用 cubic-bezier(0.22, 0.61, 0.36, 1) 比 ease-out 更真实
系统预设的缓动函数太“匀称”，而真实跳跃有加速下压、爆发回弹、缓慢回落三个阶段。cubic-bezier(0.22, 0.61, 0.36, 1) 是一个被反复验证过的“弹性跳动贝塞尔曲线”，它让中间段速度变化更陡峭，末端收得更稳。
别硬记数值，直接复制粘贴到 CSS 里：
animation: bounce 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
如果想微调节奏：时间缩短到 0.4s 更活泼，拉长到 0.8s 更沉稳；但别低于 0.3s，人眼来不及分辨动作细节。
移动端需加 will-change: transform 防掉帧
在 iOS Safari 或低端安卓浏览器上，连续 transform 动画容易卡顿，尤其页面已有其他滚动或 JS 交互时。这不是代码写错，而是渲染管线没提前分配 GPU 资源。
只需一行声明就能触发硬件加速优化：
- 加在动画元素上：
will-change: transform - 不要滥用：仅对真正持续动画的元素加，否则可能引发内存泄漏
- 配合
transform: translateZ(0)也能起效，但will-change语义更明确、兼容性更好（Chrome 36+ / Safari 9.1+ / Firefox 36+）
跳动动画的复杂点不在写法，而在“压缩-回弹-缓冲”三段节奏的权重分配，以及不同设备上渲染性能的平衡。少调两次贝塞尔值，多测两台真机，比堆 fancy 效果实在得多。
