animation-composition仅对transform和filter有效，须配合多动画声明使用；位移必须用translate类函数实现，混用left/top等属性无效，且add比accumulate更兼容。
animation-composition 只对 transform 和 filter 有效
想用 animation-composition 合成位移动画，前提是这些“位移”必须通过 transform: translateX()、translateY()、translateZ() 或组合形式（如 translate(10px, 20px)）实现。直接改 left、top、margin 等布局属性，这个属性完全不生效——浏览器压根不会尝试“叠加”它们，只会按声明顺序 replace。
常见错误是写了一堆动画都动 left，然后加 animation-composition: add，结果毫无变化。这不是 bug，是规范限定：该属性只介入可数学合成的属性，目前仅 transform 和 filter 满足条件。
必须用多动画声明 + animation-composition 显式配对
animation-composition 单独写在元素上没用，它必须和逗号分隔的多值 animation 声明一起出现，且值数量、顺序要严格对齐：
- 如果写了
animation: moveX 1s, moveY 1s, spin 2s;，那animation-composition就得对应写三个值：animation-composition: add, add, accumulate; - 缺一个或顺序错位（比如把
accumulate写在第二位但第二段动画其实没动transform），整行会静默回退到默认replace - 所有动画的
@keyframes必须都只修改transform，哪怕其中一段只写transform: translateX(100px)，另一段只写transform: rotate(45deg)，才能被正确叠加
示例（合法）：
立即学习“前端免费学习笔记（深入）”；
div {
animation: slideX 1.2s ease-in, slideY 1.2s ease-out 0.2s, spin 2s linear infinite;
animation-composition: add, add, accumulate;
}
@keyframes slideX { to { transform: translateX(100px); } }
@keyframes slideY { to { transform: translateY(-50px); } }
@keyframes spin { to { transform: rotate(360deg); } }
add 和 accumulate 的实际区别很关键
对位移类动画，add 和 accumulate 在多数场景视觉一致，但底层行为不同：
-
add：简单数值相加。比如translateX(10px)+translateY(20px)→ 最终是transform: translateX(10px) translateY(20px)（等价于translate(10px, 20px)） -
accumulate：矩阵级累加，更适合连续旋转/缩放叠加。例如两个rotate(90deg)动画叠加，add是拼字符串（可能被截断），accumulate会算出rotate(180deg)。但 Safari 对accumulate支持不稳定，生产环境建议优先用add - 注意：
add不支持混合单位，比如一个动画写translateX(10px)，另一个写translateX(5em)，叠加结果不可预测
DevTools 里看不到多个动画运行？别信眼睛
Chrome 的“Animations”面板默认只显示第一个动画，容易误判其余没跑。验证是否真正在叠加：
- 打开 Elements 面板 → 找到元素 → 展开 computed 样式 → 查看
animation-name计算值，确认是否列出全部名称（如"slideX, slideY, spin"） - 临时注释掉某一段动画，观察位移是否少掉一部分；或者用
animation-play-state: paused逐个暂停，看剩余动画是否还贡献位移 - 别靠
animation-delay错开时间来判断“有没有生效”——延迟只影响启动时机，不等于动画没注册
真正难的不是写对语法，而是确保每个动画只动 transform、参数列数严丝合缝、且避开 Safari 的 accumulate 兼容性坑。一旦漏掉其中一环，浏览器就默默切回 replace，你看到的只是最后一个动画的效果。
