ease-out 不能实现弹跳效果，仅使动画结束阶段减速；弹跳需自定义贝塞尔曲线或关键帧，如 cubic-bezier(0.25, 0.46, 0.45, 0.94) 可模拟轻微超调，但纯 ease-out 等价于该值且 y2=0.94，无回弹。
ease-out 本身不能实现弹跳效果
ease-out 只是让动画在结束阶段减速，属于单次缓动函数，没有回弹、超调或多次震荡的特性。所谓“弹跳动画”，实际需要的是带反弹（bounce）行为的自定义贝塞尔曲线或关键帧序列，ease-out 单独使用只会得到平滑收尾，而非物理意义上的弹跳。
用 cubic-bezier() 模拟基础弹跳
浏览器原生支持的 cubic-bezier() 函数可通过调整控制点制造轻微超调，接近第一次弹起的效果。典型参数如 cubic-bezier(0.25, 0.46, 0.45, 0.94) —— 第二个参数（y1）小于 0 或第四个参数（y2）大于 1 时会产生超调。
- y1
- y2 > 1：动画末尾冲过目标值再回弹（形成“砸下→弹起”感）
- 纯
ease-out等价于cubic-bezier(0.25, 0.46, 0.45, 0.94)，但 y2 = 0.94
button {
animation: bounce 0.6s cubic-bezier(0.28, 0.84, 0.42, 1.24);
}
@keyframes bounce {
0% { transform: scale(1, 1); }
70% { transform: scale(1.1, 0.9); } /* 压缩 */
100% { transform: scale(1, 1); } /* 回弹 */
}真弹跳必须靠多段 keyframes
一次完整弹跳包含下落、触底压缩、第一次弹起、二次衰减弹起……CSS 中只能靠手动拆解关键帧模拟。浏览器不提供内置 bounce 曲线，animation-timing-function: steps() 或 spring()（仅 Safari 支持）也无法替代。
- 用 4–5 个关键帧分阶段控制 transform 和 opacity，每段配不同缓动
- 第一段用
ease-in模拟加速下落 - 触底帧用
scaleY(0.85)+translateY(4px)制造挤压感 - 后续弹起帧幅度递减，且延迟时间逐次缩短
@keyframes real-bounce {
0% { transform: translateY(0); }
30% { transform: translateY(80px) scaleY(0.95); animation-timing-function: ease-in; }
45% { transform: translateY(30px) scaleY(1.05); animation-timing-function: ease-out; }
60% { transform: translateY(10px) scaleY(0.98); animation-timing-function: ease-in; }
75% { transform: translateY(2px); animation-timing-function: ease-out; }
100% { transform: translateY(0); }
}注意 performance 与兼容性取舍
高频 transform + 多层关键帧在低端 Android 设备上可能掉帧；spring() 虽简洁但仅 Safari 支持，无法用于生产环境通用弹跳。真正稳定的方案仍是：用 @keyframes 手写 3–4 段弹跳，配合 will-change: transform 提升合成层，避免触发重排。
立即学习“前端免费学习笔记（深入）”；
- 别对
height或margin做弹跳动画——会触发 layout - 移动端慎用超过 3 次弹跳，用户感知阈值约 200ms 内完成主动作
- 若需精确物理参数（阻尼、质量），应交由 JavaScript 库（如 framer-motion）处理
弹跳不是缓动类型的选择问题，而是动画结构的设计问题。把“用 ease-out 实现弹跳”当起点，很容易卡在第一帧就失真。
