cubic-bezier 是实现真实弹跳的关键，因其可通过超范围控制点（如 y=1.56）产生回弹与衰减效果；需耦合位移、缩放、旋转，配合 scaley 压缩拉伸及 forwards 填充等细节才能复现物理弹跳。
为什么 cubic-bezier 是实现真实弹跳的关键
浏览器原生的 ease-in-out 或 ease 无法模拟物理弹跳——它缺少“回弹”和“衰减”感。真正有弹性的跳动，需要在落地瞬间快速减速、短暂停顿、再小幅反弹，这恰好对应三次贝塞尔曲线中控制点的非对称排布。cubic-bezier(0.34, 1.56, 0.64, 1) 这类超出 [0,1] 范围的 y 值（如 1.56）会让动画在关键帧之间“超调”，产生回弹效果。
如何写出一个可复用的弹性球跳动 CSS 类
核心是把位移、缩放、旋转三者耦合进同一段 @keyframes，并用自定义 cubic-bezier 控制整体节奏。注意：只靠 transform: translateY() 不够，球体落地时需配合 scaleY(1.2) 模拟压缩，离地前加 scaleY(0.8) 模拟拉伸。
实操建议：
- 使用
@keyframes bounce定义 0% → 50%（下落+压缩）→ 70%（回弹）→ 100%（静止）四阶段 - 动画时长设为
0.8s，但用cubic-bezier(0.28, 0.84, 0.43, 1.25)替代默认缓动——这个值经测试能稳定出弹感 - 给球容器加
overflow: hidden，防止scaleY > 1时形变溢出 - 避免在
top/bottom上做动画，一律用transform: translateY()保证性能
常见失效原因：你可能漏掉了这些细节
即使贝塞尔值抄对了，动画仍显僵硬或不动，大概率是以下问题：
-
animation-fill-mode没设成forwards，导致最后一帧不保持，球“掉回原位” - 父容器没设
position: relative，而球用了position: absolute，导致translateY参照错乱 - 同时写了
transition和animation，CSS 层叠优先级冲突，动画被覆盖 - 在 Safari 上失效？补上
-webkit-animation和-webkit-transform前缀（iOS 15.4 之前必须）
想调得更准？用 Chrome DevTools 实时拖拽贝塞尔曲线
打开开发者工具 → Elements 面板 → 找到动画元素 → Styles 侧边栏里点开 animation-timing-function 右侧的小齿轮图标 → 选 “Cubic Bezier” → 直接拖动两个控制点。重点观察：第二个控制点的 y 值 > 1 时出现回弹，y > 1.3 后容易过冲；第一个控制点 x 值越小，起始越快，适合模拟重力加速。调好后右键复制生成的 cubic-bezier(...) 值即可。
复杂点在于：弹跳不是单次事件。如果要做连续多次衰减弹跳，得用多段 keyframes + 不同的贝塞尔值分段控制，且每段持续时间递减——这时候手写 CSS 易出错，建议用 JS 控制 class 切换或改用 GSAP 的 bounce easing。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
