串联与编排动画
通过错开的延迟串联多个动画，创建复杂的动画序列。
串联与编排动画 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
为什么要编排动画
复杂的用户界面效果通常需要按顺序执行多个动画：元素滑入、暂停，然后淡出。CSS 提供了多种工具，可以在不使用 JavaScript 的情况下串联动画。
使用动画延迟进行编排
最简单的编排方式是：根据前一个动画的时长，计算下一个动画应开始的时间：
<div class="element">Slides in, then fades out</div>
多步骤关键帧
对于单个元素，最简洁的方法是：在一个 @keyframes 规则中使用百分比节点编码完整序列：
<div class="toast">Notification toast</div>
使用 CSS 自定义属性设置时长
将时长存储在 CSS 变量中，便于协调串联动画：
<div class="box">Custom-property-driven timing</div>
动画时间线（现代）
Web 动画 API 和滚动关联动画（ScrollTimeline）支持无需计算延迟时间的高级动画编排。这是复杂 CSS 动画编排的未来方向。
使用 CSS 自定义属性实现错峰
通过以内联方式或使用 JavaScript 设置的 CSS 自定义属性来驱动错峰延迟：
<div class="item" style="--delay:0ms">Item 1</div>
<div class="item" style="--delay:120ms">Item 2</div>
<div class="item" style="--delay:240ms">Item 3</div>
JavaScript 驱动的动画编排
对于需要精确控制的多元素序列，请使用 Web 动画 API 或 GSAP 等库。仅使用 CSS 时，在协调具有复杂相互依赖关系的独立元素方面能力有限。
注意力动画
一种先脉冲再稳定的注意力动画序列：
<div class="notification">New message!</div>
AnimationEnd 事件
请在 JavaScript 中监听 animationend，以便通过程序触发下一步：
<div class="box" id="ae-box">Watch me</div>
<script>
const el = document.getElementById('ae-box');
el.addEventListener('animationend', (e) => {
if (e.animationName === 'slideIn') {
el.classList.add('phase-2');
el.textContent = 'animationend fired!';
}
});
</script>
页面过渡模式
使用切换类实现 CSS 页面过渡序列：
<div class="page-leaving">Leaving page</div>
<div class="page-entering">Entering page</div>
加载状态骨架
使用偏移量实现多步骤骨架加载动画：
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
快速检查
在 CSS 中为单个元素编码完整的多步骤动画序列，最佳方式是什么？
回顾
CSS 动画编排可以使用根据前一动画时长设置的延迟、带百分比节点的多步骤 @keyframes，或用于存储时长的自定义属性变量。animationend 事件支持由 JavaScript 触发连续阶段。对于复杂的多元素编排，请考虑使用 Web 动画 API。
常见问题解答
「串联与编排动画」课时是免费的吗？
是的 — 「串联与编排动画」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「串联与编排动画」这节课中我会学到什么？
通过错开的延迟串联多个动画，创建复杂的动画序列。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「串联与编排动画」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。