在css中精确控制多个关键帧动画的顺序，核心方法是利用 @keyframes 定义独立的动画序列，并通过 animation-name 和 animation-delay 属性将它们串联或并行执行。若需严格顺序执行，应使用单个 @keyframes 包含所有阶段；若需模块化组合，则通过设置负延迟或正延迟来错开时间轴，确保前一动画结束或到达特定节点时后一动画启动。
如何在一个关键帧中实现多阶段顺序动画？
将多个视觉变化步骤写入同一个 @keyframes 规则中，是实现最严格顺序控制的直接方式。浏览器会按百分比线性插值执行这些步骤，无需考虑外部同步问题。这种方法适合逻辑紧密耦合的动画，如“先移动再变色”。
/* 定义包含两个阶段的单一动画 */
@keyframes moveThenColor {
0% { transform: translateX(0); background-color: red; }
50% { transform: translateX(100px); background-color: red; }
100% { transform: translateX(100px); background-color: blue; }
}
.box {
animation: moveThenColor 2s linear forwards;
}
上述代码中，元素在前1秒（0%-50%）仅发生位移，背景色保持红色；在后1秒（50%-100%）位置固定，背景色渐变为蓝色。这种写法保证了绝对的时序依赖，任何阶段的变化都依赖于前一个阶段的完成。
如何通过延迟参数组合独立的关键帧？
当动画模块较大或需要复用不同动画片段时，可以定义多个独立的 @keyframes，并利用 animation-delay 控制它们的启动时机。关键在于计算好每个动画的持续时间，使后一个动画的延迟等于前一个动画的总时长，从而实现无缝衔接。
/* 定义两个独立的动画 */
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.element {
/* 第一个动画立即开始，持续1秒 */
animation: slideIn 1s ease-out forwards;
/* 第二个动画延迟1秒开始，即在第一个动画结束后开始 */
animation-delay: 1s;
animation: fadeOut 1s ease-in forwards;
}
注意：在实际CSS中，不能在同一选择器上重复声明 animation 简写属性而不合并。正确的做法是使用逗号分隔多个动画，并对应设置延迟。例如：animation: slideIn 1s ease-out forwards, fadeOut 1s ease-in forwards 1s;。这里第二个动画的延迟设为1s，确保它在第一个动画完成后启动。这种方式提供了更高的灵活性，允许单独调整每个动画的时长和缓动函数，而不会相互干扰。
当动画持续时间不一致时如何保持同步？
如果多个独立动画的持续时间不同，简单的等长延迟会导致重叠或间隙。此时需要精确计算延迟值，使其等于前一个动画的实际持续时间。此外，可以使用 animation-fill-mode: forwards 确保动画结束后状态保留，避免回退到初始状态影响后续动画的视觉效果。
.complex-element {
/* 动画A持续2秒，动画B持续1.5秒，从第2秒开始 */
animation: animA 2s linear forwards, animB 1.5s linear forwards 2s;
}
在此示例中，animB 的延迟设置为2s，与 animA 的持续时间完全匹配。这样即使两个动画内部复杂度不同，它们在时间轴上的衔接点也是确定的。开发者应避免使用JavaScript来控制CSS动画的时间轴，除非涉及极其复杂的交互逻辑，否则纯CSS方案足以满足大多数顺序控制需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
