直接用 @keyframes 定义缩放 + 位移组合动画，配合 cubic-bezier() 模拟物理回弹，比单独用 scale() 或单独用 translateY() 更真实。纯 CSS 就能搞定，不需要 JS。
为什么不能只用 scale() 做弹跳
弹跳不是简单放大缩小——它包含下落、触底压缩、回弹、小幅震荡几个阶段。只改 scale() 会丢失垂直动量感，看起来像“气球被按扁又松开”，而不是“球砸地后弹起”。真实弹跳必然伴随 translateY() 的位移变化，且各阶段速率非线性。
scale(1.2) 在触底时制造“压缩感”，但必须同步 translateY(5px) 模拟形变下沉回弹阶段要先快后慢，cubic-bezier(0.28, 0.84, 0.42, 1) 比 ease-out 更接近重力衰减最后 1–2 次微震需用 scale(0.98) → scale(1) 和 translateY(-2px) → translateY(0) 配合，否则停得太硬
@keyframes bounce-scale 的关键帧怎么写
下面这个 7 步关键帧是经过实测的最小有效结构，兼顾视觉可信度和性能（避免过多中间帧）：
@keyframes bounce-scale { 0% { transform: translateY(-30px) scale(0.9); } 30% { transform: translateY(0) scale(1.15); } 45% { transform: translateY(-8px) scale(0.95); } 60% { transform: translateY(0) scale(1.03); } 75% { transform: translateY(-3px) scale(0.98); } 90% { transform: translateY(0) scale(1.01); } 100% { transform: translateY(0) scale(1); }}起始 translateY(-30px) 模拟预跳高度，scale(0.9) 提前暗示压缩趋势30% 是触底峰值：scale(1.15) + 到达 translateY(0)，形成最大形变45% 和 75% 的负向位移是回弹过冲，没有它就没有“弹”感结尾两帧必须回到 scale(1) 和 translateY(0)，否则 animation-fill-mode: forwards 会卡在错误状态
应用动画时最容易漏掉的三个配置
写完关键帧却没效果？大概率栽在这三处：
立即学习“前端免费学习笔记（深入）”；
没设 transform-origin: center：默认原点在左上角，缩放+位移一叠加，元素就往右下“滑出去”了忘了加 animation-fill-mode: forwards：动画播完立刻跳回初始态，根本看不到“落地静止”的最终帧overflow: hidden 父容器裁剪了位移：弹跳过程元素会短暂超出原始尺寸，父级若设了 overflow: hidden，就会被截断——临时改成 visible 测试，或扩大父容器 padding
真正难的是让多次弹跳自然衰减，CSS 本身不支持动态调整关键帧数值，所以超过 2 次明显回弹就得切到 JS 控制节奏，或者用 Web Animations API 手动插值。纯 CSS 方案里，把第 3 次以后的震荡幅度压到 ±0.01，人眼基本就接受为“停稳”了。
评论(0)