多个 animation 值写在一起会覆盖而非叠加，正确写法是用逗号分隔同一 animation 属性中的多个动画；参数须严格对齐，漏写会导致默认值误配；动画冲突主因是 transform 覆盖或 keyframes 重名，可合并关键帧、拆分职责或使用 animation-composition: add（仅限 transform/filter）。
多个 animation 值写在一起会覆盖，不是叠加
CSS 里给同一个元素写多条 animation 声明时，后写的会完全覆盖前写的，不会“叠加执行”。比如：
div {
animation: slide 2s;
animation: fade 1.5s;
}
实际只生效 fade 1.5s，slide 被丢掉了。这不是 bug，是 CSS 属性的覆盖机制决定的。
真正支持“多个动画同时运行”的方式，是把它们写进**同一个 animation 属性值里，用逗号分隔**：
div {
animation: slide 2s, fade 1.5s;
}
animation 多值写法的参数必须严格对齐
逗号分隔的每个动画，其各参数（持续时间、延迟、迭代次数等）必须一一对应，顺序不能错乱。例如：
立即学习“前端免费学习笔记（深入）”；
div {
animation:
move 2s ease-in 0.5s infinite,
rotate 1s linear 0s 3;
}
上面两个动画的参数列分别是：
-
move→ 2s（duration）、ease-in（timing-function）、0.5s（delay）、infinite（iteration-count） -
rotate→ 1s、linear、0s、3
如果漏掉某个参数（比如没写 rotate 的 iteration-count），浏览器会按顺序“向前补默认值”，导致 3 被当成 direction，而不是重复次数——结果就是动画只播一次，还可能反向播放。
稳妥做法：显式写出所有关键参数，尤其是 animation-iteration-count 和 animation-fill-mode，避免歧义。
动画冲突常源于 transform 层叠或关键帧命名重复
即使 animation 多值写法正确，视觉上仍可能“打架”，典型原因有两个：
- 多个动画都修改了同一个 CSS 属性（比如都改
transform），后定义的关键帧会覆盖前面的变换，不是矩阵相乘 - 用了相同名字的关键帧（
@keyframes rotate和@keyframes rotate写了两遍），浏览器只认最后一个
解决方法：
- 合并逻辑：把位移 + 旋转 + 缩放写进同一个
@keyframes里，用transform: translateX() rotate() scale()一次性声明 - 拆分职责：一个动画只负责
opacity，另一个只负责transform，不交叉 - 检查
@keyframes名称是否唯一，尤其在多人协作或引入第三方 CSS 时
用 animation-composition 控制叠加行为（较新特性）
CSS 新增了 animation-composition 属性（目前 Chrome 114+、Safari 17.4+ 支持），可显式指定多个 transform 动画如何合成：
div {
animation:
move 2s both,
spin 1.5s both;
animation-composition: add, add;
}
其中 add 表示将多个 transform 动画的矩阵相加（更符合直觉），而默认行为是 replace（后覆盖前）。但注意：animation-composition 还不能用于 opacity 或颜色类属性，仅限 transform 和 filter。
兼容性要求高时，优先用单关键帧合并；需要精细控制且目标环境支持，再考虑 animation-composition。
最易被忽略的一点：动画冲突往往不是写法问题，而是没意识到多个 transform 不会自动累加——哪怕语法全对，效果也可能和预期差很远。
