AI 摘要：本文通过一个简洁的示例与完整讲解，展示了如何仅用几行现代 CSS 代码实现 N 个元素的顺序动画。作者利用 CSS 的 linear() 函数自定义时间曲线（timing function），结合 sibling-index() 与 sibling-count() 自动计算每个元素的动画时间段，使所有元素依次播放动画而不需复杂的 keyframes 管理。该方法具有可扩展性和可维护性，为 CSS 动画提供了新的编程式思路。

1. 背景与问题定义
• 多个元素需要依次执行相同的动画，传统方法需手动定义复杂 keyframes 与延迟。
• 目标：用纯 CSS，在不修改 keyframes 的前提下让动画顺序执行、可循环、可扩展至任意元素数量。

2. CSS linear() 函数解释
• linear() 是一种新的时间函数（easing function），支持自定义多个控制点（control points）。
• 通过定义输入进度（input progress）与输出进度（output progress）来构造任意变化曲线。
• 相较于传统 ease 或 cubic-bezier()，linear() 可精确定义不同阶段的动画输出。
• 可用百分比或数值型进度表示时间点，省略值会自动插补为中间点。

3. 利用 linear() 构造延迟（animation delay）
• 通过重复定义相同输出值（如 linear(0 0%, 0 50%, 1 100%)）可制造“暂停”效果。
• 表示动画前半段不变化、后半段才执行。
• 可灵活组合多个时间段，无需修改 keyframes 即可调整节奏。

4. 构建顺序动画逻辑
• 多元素顺序动画思想：每个元素仅在自己的时间段（range）内动画，其余时间保持静止。

• 对于 N 个元素，将总时间分为 N 等份，每个元素依次占一个区间。

• 变量定义：
• S = 起始点 = (i - 1) × 100% / N
• E = 结束点 = i × 100% / N

• 关键 CSS 实现：
--_s: calc(100%(sibling-index()-1)/sibling-count());
--_e: calc(100%(sibling-index())/sibling-count());
animation: x calc(var(--d)*sibling-count()) infinite
linear(0, 0 var(--_s), 1, 0 var(--_e), 0);

• 使用 sibling-index()/sibling-count() 自动计算索引与总量，无需额外 JS。

5. 浏览器兼容性与注意事项
• 目前主要支持 Chromium 内核（Chrome、Edge），Firefox 与 WebKit 尚在推进中。
• 某些变量可能需通过 @property 注册以解决兼容性问题。

6. 扩展与变体
• 可设计多个重叠区间（N+1 ranges）使动画出现过渡重叠（overlapping）效果。
• 原理一致：通过调整控制点范围改变动画逻辑，可产生更复杂的节奏模式。

7. 总结
• linear() 函数原为实现复杂缓动曲线而生，但结合现代 CSS 特性（变量、siblings 函数）可实现可编程化动画逻辑。
• 提供一种无需 JS、结构清晰、可扩展的纯 CSS 动画新范式。

CSS-Tricks

Sequential linear() Animation With N Elements | CSS-Tricks

Let’s suppose you have N elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!