AI 摘要：本文系统讲解了 CSS 新增的 linear() 时间函数如何取代传统 Bézier 曲线实现物理感动画（如弹簧、反弹等）。作者展示了从手动绘制到使用工具自动生成曲线的全过程，分析了 linear() 的语法结构、性能表现及使用局限，并给出实际工程中使用变量与媒体查询的最佳实践。

1. 背景与问题
• 传统的 CSS 动画多依赖 cubic-bezier() 曲线控制速率，但难以模拟弹性或物理效果。
• 开发者过去往往用 JavaScript 库（如 React Spring）实现，但带来主线程阻塞与性能权衡。
• CSS 新增的 linear() 函数允许通过一系列线性分段点定义任意缓动曲线，可原生表达弹跳、振动等效果。

2. linear() 函数原理
• linear() 接受一组 0–1 范围的浮点值，各点线性连接形成曲线。
• 可超出 0–1 实现“overshoot”（超冲），营造弹性。
• 点数越多，动画越平滑；作者从 11 到 50 点的实验验证了差异。

3. 工具实战
• 推荐使用 Linear() Easing Generator 与 Easing Wizard 自动生成数据。
• 新语法支持为每个点标注时间百分比，使曲线在较少数据点下更精确。
• 工具可将弹性参数（stiffness、damping、mass）转化为 CSS 代码，并计算最优持续时间。

4. 限制与挑战
• 时间基准限制：CSS 必须定义 duration，不支持真正的物理时间动态计算。
• 中断问题（interrupts）：React Spring 可处理惯性，而 CSS 转场中断后立即反向，缺乏自然过渡感。
• 性能考量：实际测试显示即使 linear() 包含百余数据点，帧率与体积影响极小（仅增约 1.3 kB gzip），但建议通过 CSS 变量复用。

5. 实用建议与模式
• 将常用的 linear() 表达式与持续时间封装为 CSS 变量（design tokens）。
• 用 @supports 检查浏览器兼容性并提供 cubic-bezier() 回退。
• 结合 @media (prefers-reduced-motion) 照顾无障碍动效偏好。
• 在注释中记录物理参数，方便未来调整。

Joshwcomeau

Springs and Bounces in Native CSS • Josh W. Comeau

The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experimenting with this API for a while now, and in this post, I’ll…