Springs and Bounces in Native CSS：用 linear() 函数模拟物理弹动

导语

CSS 动画一直有个痛点：贝塞尔曲线最多 4 个控制点，模拟真实弹簧或弹跳要嘛靠关键帧硬写，要嘛丢给 JS。现在 linear() 来了，它允许你把任意运动曲线拆成一段一段线性插值，弹簧和弹跳终于能纯 CSS 实现了。

linear() 是什么？

linear() 是一个 CSS 时间函数，和 cubic-bezier() 平级，但参数形式完全不同：

animation-timing-function: linear(0, 0.2, 0.4, 0.6, 0.8, 1);

它表示动画进度按你给的数值匀速推进，浏览器会自动在相邻点之间做线性插值。神奇的地方在于：值可以超出 0~1 范围，这就让”弹簧过冲”和”弹跳回弹”成为可能。

模拟一个弹簧效果

弹簧的核心特征：越过终点再回弹。用 linear() 可以这样写：

.spring {
  animation: spring 0.8s linear;
  animation-timing-function: linear(0, 0.3, 0.6, 1.1, 0.9, 1);
}

解释：进度先冲到 1.1（过冲 10%），再回落到 0.9，最后稳定在 1。这就是弹簧的”阻尼振荡”简化版。

模拟弹跳

弹跳比弹簧更极端，需要多次回弹：

.bounce {
  animation: bounce 1s linear;
  animation-timing-function: linear(
    0, 0.15, 0.4, 1.05,
    0.8, 1.02, 0.97, 1
  );
}

1.05 是第一次落地后的反弹高度，后续逐步衰减到 1。

和 cubic-bezier() 的对比

实用技巧：用 CSS 变量复用曲线

:root {
  --spring: linear(0, 0.3, 0.6, 1.1, 0.9, 1);
  --bounce: linear(0, 0.15, 0.4, 1.05, 0.8, 1.02, 0.97, 1);
}
.button {
  animation-timing-function: var(--spring);
}

已知限制

• linear() 不支持 animation-direction: alternate 时的自然过渡。
• 动画中断时不会自动计算中间态，跳跃感比贝塞尔曲线明显。
• 太长的时间函数列表会增加样式解析开销，建议控制在 10 个点以内。

结论

如果你需要简单的弹簧/弹跳效果，linear() 是目前最轻量的纯 CSS 方案，不需要 JS 库、不需要关键帧。缺点是参数不像贝塞尔曲线那样容易手写，推荐配合在线生成器或设计工具导出值。对于复杂的物理动画，linear() 是”够用就好”的折中，不是”精确物理引擎”的替代。