css 动画与弹性效果_通过 ease-out 创建弹跳动画效果

2026-01-15

css 动画与弹性效果_通过 ease-out 创建弹跳动画效果

ease-out 不能实现弹跳效果，仅使动画结束阶段减速；弹跳需自定义贝塞尔曲线或关键帧，如 cubic-bezier(0.25, 0.46, 0.45, 0.94) 可模拟轻微超调，但纯 ease-out 等价于该值且 y2=0.94，无回弹。

css 动画与弹性效果_通过 ease-out 创建弹跳动画效果

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 提升合成层，避免触发重排。