CSS支持多个动画同时执行，需在animation属性中用逗号分隔各动画的完整参数序列，且名称、时长、延时、迭代次数等必须严格一一对应、数量一致。
在 CSS 中，可以通过在 animation 属性中用逗号分隔多个动画定义，实现多个动画同时执行。关键在于：每个动画的各个参数（名称、时长、延时、迭代次数等）必须严格按顺序一一对应，且数量一致。
语法结构要对齐
多个动画写法不是简单堆叠，而是把每个动画的完整参数序列用逗号分开，各部分位置必须对齐：
-
animation-name：动画名列表，如
slide, fade, rotate -
animation-duration：对应每个动画的持续时间，如
1s, 0.8s, 1.2s -
animation-delay：各自延时，如
0s, 0.2s, 0s -
animation-iteration-count：循环次数，如
infinite, 1, 3 - 其余属性（
timing-function、direction、fill-mode等）同理，都要一一对应
一个实际例子
让元素同时滑入、淡入并轻微旋转：
.box {
animation-name: slideIn, fadeIn, spin;
animation-duration: 0.6s, 0.6s, 1.5s;
animation-timing-function: ease-out, ease-in, linear;
animation-delay: 0s, 0s, 0.3s;
animation-iteration-count: 1, 1, infinite;
animation-fill-mode: forwards, forwards, none;
}
注意：spin 动画延迟了 0.3 秒才开始，而 slideIn 和 fadeIn 是立即启动的 —— 这种差异化控制正是多动画分离声明的价值所在。
立即学习“前端免费学习笔记（深入）”；
简写写法（推荐但需谨慎）
也可以全部写在单个 animation 简写属性里，更紧凑：
.box {
animation:
slideIn 0.6s ease-out forwards,
fadeIn 0.6s ease-in forwards,
spin 1.5s linear 0.3s infinite;
}
⚠️ 注意：简写中未明确写出的子属性（如 animation-direction）会回退为默认值（normal），若需非默认值，建议显式写出或改用分开声明方式。
常见问题提醒
多个动画同时运行时容易出错的地方：
- 动画名数量和时长数量不一致 → 整条
animation声明会被浏览器忽略 - 混用简写与独立属性（比如写了
animation: ...又单独设animation-duration）→ 后者可能被简写覆盖 - 多个动画修改同一属性（如都改
transform）→ 后声明的动画会覆盖前一个的 transform 效果（除非用transform: translate() rotate() scale()合并在一条声明中）
