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() 可以这样写：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。

和 cubic-bezier() 的对比

cubic-bezier() 固定 4 值，只支持一次过冲；linear() 支持任意数量点，可多次振荡。浏览器支持方面：Chrome 113+ / Firefox 115+。

结论

如果你需要简单的弹簧/弹跳效果，linear() 是目前最轻量的纯 CSS 方案。缺点是参数不像贝塞尔曲线那样容易手写，推荐配合在线生成器或设计工具导出值。