cubic-bezier 是实现弹跳效果的关键，因其可通过超调（y>1）和反向拉扯（y<0）模拟弹簧回弹；需分段设置多段关键帧与对应贝塞尔曲线，并注意 GPU 加速、交互禁用和 fill-mode 等细节。
为什么 cubic-bezier 是实现弹跳效果的关键
CSS 动画本身不提供“弹跳”这类物理反馈，但 cubic-bezier() 允许你自定义缓动曲线，模拟弹簧回弹的加速度变化。关键在于让动画在结束前“冲过头”，再折返几次衰减——这正对应贝塞尔控制点中 y 值超出 [0, 1] 范围的行为（比如 y > 1 表示超调，y < 0 表示反向拉扯）。
常见误区是直接套用网上搜到的“弹跳 cubic-bezier”，结果动画卡顿或只弹一次：这是因为没匹配动画时长、位移幅度和衰减节奏。
怎么写出一个真正可用的弹跳 cubic-bezier 曲线
标准弹跳不是单段贝塞尔能完成的，得拆成多段关键帧 + 每段配不同 cubic-bezier()。最简可行方案是 4 步弹跳（主弹 + 2 次衰减 + 静止）：
- 第一段（0% → 60%）：快速下落 + 超调 →
cubic-bezier(0.34, 1.56, 0.64, 1) - 第二段（60% → 85%）：第一次回弹衰减 →
cubic-bezier(0.4, 0, 0.2, 1) - 第三段（85% → 95%）：小幅二次反弹 →
cubic-bezier(0.4, 0, 0.6, 1) - 第四段（95% → 100%）：缓慢归位 →
ease-out或cubic-bezier(0.2, 0, 0, 1)
@keyframes bounce {
0% { transform: translateY(0); }
60% { transform: translateY(40px); }
85% { transform: translateY(10px); }
95% { transform: translateY(3px); }
100% { transform: translateY(0); }
}
<p>.bounce-element {
animation: bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
bounce 0.8s 0.8s cubic-bezier(0.4, 0, 0.2, 1),
bounce 0.8s 1.6s cubic-bezier(0.4, 0, 0.6, 1),
bounce 0.8s 2.4s cubic-bezier(0.2, 0, 0, 1);
animation-fill-mode: forwards;
}注意：animation 属性里多个动画用逗号分隔，时间偏移（如 0.8s）必须严格递增，否则会覆盖。
立即学习“前端免费学习笔记（深入）”；
用 CSS @property 实现更可控的弹性动画（Chrome 110+）
如果目标浏览器支持，@property 可以把自定义属性变成可动画的“物理量”，配合 spring() 缓动（目前仅 Chrome 支持）：
-
先注册可动画的自定义属性：
@property --y-pos { syntax: '<length>'; inherits: false; initial-value: 0px; } -
再用
spring()驱动（它比cubic-bezier更接近真实弹簧）：.spring-bounce { --y-pos: 0px; transform: translateY(var(--y-pos)); animation: spring-bounce 0.6s ease forwards; } </li></ul><p>@keyframes spring-bounce { to { --y-pos: 40px; } }</p><p>/<em> 关键：spring() 作为缓动函数 </em>/ .spring-bounce { animation-timing-function: spring(1, 100, 10, 0); }spring(mass, stiffness, damping, velocity)四个参数直接影响弹感：增大stiffness更硬、减小damping更晃。但目前兼容性差，仅作进阶选项。容易被忽略的三个细节
-
transform: translateY()必须搭配will-change: transform或启用 GPU 加速（如加transform: translateZ(0)），否则高频弹跳在低端设备上掉帧明显 - 弹跳动画若用于按钮点击反馈，要加
pointer-events: none在动画中临时禁用交互，避免连续触发 - 使用
animation-fill-mode: forwards是必须的，否则动画结束后元素会“啪”地跳回初始位置，破坏弹性感
真实项目里，弹跳不是越复杂越好。多数场景下，2–3 次衰减 + 总时长 ≤ 0.7s 的效果最自然。过度追求物理精确反而让用户觉得“卡”或“油腻”。
-
