animation-composition仅对transform/filter有效，需多动画声明、同类属性修改及值顺序严格对齐；常见失效原因包括单动画声明、属性混用或参数错位。
animation-composition 只对 transform 和 filter 有效，设了也不影响 opacity、background-color 或 width 等属性；想让多个动画真正“叠加”，必须满足三要素：多动画声明 + 同类可合成属性 + 值顺序严格对齐。
为什么加了 animation-composition: add 却没叠加效果？
常见错误是只改了这个属性，却没检查底层前提是否成立：
- 元素上只声明了一个动画 →
animation-composition完全不生效（它必须配合多个动画） - 多个动画分别修改
opacity和transform→ 只有transform部分受animation-composition控制，opacity仍按层叠规则被后一个覆盖 - 写了
animation: slide 1s, spin 1.5s;但没写animation-composition: add, replace;→ 默认全部是replace，第二个动画直接抹掉第一个的transform - DevTools 的 “Animations” 面板只显示第一个动画 → 实际其余动画可能已注册但被静默忽略，要查
computed样式里的animation-name值确认
add 和 accumulate 在 transform 动画中怎么选？
二者都用于数值或矩阵级叠加，但行为和兼容性差异明显：
-
add对平移类最安全：translateX(10px)+translateX(20px)→translateX(30px)，Chrome/Safari/Edge 全支持 -
accumulate对旋转/缩放更准：rotate(90deg)+rotate(90deg)在矩阵运算下稳定得rotate(180deg)，但 Safari 目前仅部分支持，Chrome 125+ 才稳定 - 混用
rotate+scale+skew时，accumulate是更合理的选择，但上线前必须在目标浏览器里验证computed的transform值是否符合预期 - 不确定时，先用
add；若发现连续叠加后角度漂移（比如转了 4 次 90° 最终不是 360°），再切到accumulate并加降级 fallback
多个动画参数如何对齐才不静默失效？
animation 简写中逗号分隔不是“自由堆叠”，而是按列解析，缺一即错位：
- 每个动画片段必须完整包含 8 个位置：
name、duration、timing-function、delay、iteration-count、direction、fill-mode、play-state - 错误示例：
animation: slide 0.6s, fadeIn 0.6s ease-in, spin 1.5s linear 0.3s;→ 第三项少了iteration-count和fill-mode，导致0.3s被当作循环次数，后续值全部错位 - 正确写法必须显式补全：
animation: slide 0.6s ease-out 0s 1 forwards, fadeIn 0.6s ease-in 0s 1 forwards, spin 1.5s linear 0.3s infinite both; -
animation-composition的值个数必须与动画数量一致，且顺序严格对应：animation-composition: add, replace, accumulate;中第一个值作用于slide，第二个作用于fadeIn，漏掉一个就会按顺序补默认replace
想同时平移 + 旋转，非要用 animation-composition 吗？
不一定。最简单可靠的方式是合并进同一套 @keyframes：
@keyframes moveAndRotate {
from {
transform: translateX(0) rotate(0);
}
to {
transform: translateX(100px) rotate(360deg);
}
}
只有当你需要独立控制节奏（比如平移 1s、旋转 2s、延迟不同）时，才值得拆成多个动画并启用 animation-composition。这时候务必注意：animation-composition 不解决所有冲突——它不处理 opacity 和 color，也不修复参数错位，更不兜底浏览器兼容性断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
