animation-composition仅对transform/filter有效，replace为默认值，add数值相加，accumulate矩阵级累加更准但兼容性差；需多动画声明且值顺序严格对齐，否则静默回退replace。
animation-composition 只对 transform/filter 有效
这个属性不是万能的“动画混合开关”，它只作用于 transform 和 filter 这两类可合成属性。如果你给同一个元素同时加了 translateX(10px) 和 rotate(30deg) 动画，animation-composition: add 才会让它们真正叠加出位移+旋转效果；但要是你同时动 opacity 和 width，这个属性完全不生效——前者靠浏览器自动并行，后者根本没法安全叠加。
常见错误是以为设了 animation-composition: add 就能解决所有动画打架问题，结果发现 background-color 还是被后一个动画覆盖。这时候得换思路：要么合并进同一套 @keyframes，要么拆到不同属性上。
replace / add / accumulate 的实际区别在哪
replace 是默认值，新动画直接替换旧动画在该属性上的全部效果；add 是数值相加（比如 translateX(10px) + translateX(20px) = translateX(30px)）；accumulate 是矩阵运算级累加，对旋转、缩放这类非线性变换更准确（例如 rotate(90deg) + rotate(90deg) 在 accumulate 下稳定等于 rotate(180deg)，而 add 在某些旧实现里可能有精度偏差）。
多数场景下 add 和 accumulate 看不出差别，但涉及连续叠加多个旋转或斜切时，accumulate 更可靠。不过目前 Chrome 和 Safari 对 accumulate 支持尚不统一，生产环境建议优先用 add 并做兼容性测试。
- 只操作
translate类平移？add足够 - 动画里混用了
rotate+scale+skew？倾向accumulate，但得验证目标浏览器行为 - 不确定要不要用？先写
add，再看 DevTools 的 computed 样式里transform值是否符合预期
animation-composition 必须和多动画声明配合使用
单独写 animation-composition: add 没有意义——它必须出现在同时声明了多个动画的元素上，且每个动画都修改了同一类可合成属性（如都改 transform）。典型写法：
div {
animation: slide 1s, spin 1.5s;
animation-composition: add, replace;
}
这里第一个值 add 对应 slide，第二个 replace 对应 spin，顺序必须严格对齐。漏掉一个值，浏览器会按顺序补默认值 replace，导致本想累加的动画反而被覆盖。
容易踩的坑：
- 只写一个值
animation-composition: add，以为能全局生效 → 实际只作用于第一个动画 - 动画数量和
animation-composition值数量不一致 → 后面的动画回退到replace，视觉上“突然跳变” - 用
animation-name单独多次声明动画 → 覆盖而非叠加，animation-composition根本没机会起作用
调试时别只信 DevTools 的“Animations”面板
Chrome DevTools 的 Animations 面板默认只显示第一个动画的实时进度条，其余动画藏在 animation 属性展开项里，且不标当前帧。你以为某个 rotate 动画没跑，其实它正安静地在后台执行着。
更靠谱的验证方式：
- 临时加
animation-play-state: paused，然后逐个取消注释动画名来隔离观察 - 在关键帧里插入临时样式，比如
from { background: rgba(255,0,0,0.1); }，肉眼确认是否触发 - 打开 computed 面板，盯着
transform字段的实时变化值，看它是单值（被覆盖）还是复合值（如matrix(...)，说明已合成）
真正难处理的从来不是语法写错，而是你以为合成了，其实浏览器悄悄 fallback 到了 replace ——尤其当动画时长、延迟或 fill-mode 不匹配时，合成逻辑会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
