cubic-bezier 是实现弹跳效果的关键，因其可通过超调（y>1）和反向拉扯（y
为什么 cubic-bezier 是实现弹跳效果的关键
CSS 动画本身不提供“弹跳”这类物理反馈，但 cubic-bezier() 允许你自定义缓动曲线，模拟弹簧回弹的加速度变化。关键在于让动画在结束前“冲过头”，再折返几次衰减——这正对应贝塞尔控制点中 y 值超出 [0, 1] 范围的行为（比如 y > 1 表示超调，y 表示反向拉扯）。
常见误区是直接套用网上搜到的“弹跳 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); }
}
.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: ''; 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; }
@keyframes spring-bounce { to { --y-pos: 40px; } }
/ 关键：spring() 作为缓动函数 / .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 是必须的，否则动画结束后元素会“啪”地跳回初始位置，破坏弹性感
transform: translateY() 必须搭配 will-change: transform 或启用 GPU 加速（如加 transform: translateZ(0)），否则高频弹跳在低端设备上掉帧明显 pointer-events: none 在动画中临时禁用交互，避免连续触发 animation-fill-mode: forwards 是必须的，否则动画结束后元素会“啪”地跳回初始位置，破坏弹性感 真实项目里，弹跳不是越复杂越好。多数场景下，2–3 次衰减 + 总时长 ≤ 0.7s 的效果最自然。过度追求物理精确反而让用户觉得“卡”或“油腻”。
