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 是必须的，否则动画结束后元素会“啪”地跳回初始位置，破坏弹性感

真实项目里，弹跳不是越复杂越好。多数场景下，2–3 次衰减 + 总时长 ≤ 0.7s 的效果最自然。过度追求物理精确反而让用户觉得“卡”或“油腻”。