animation-composition仅对transform和filter有效，用于叠加translate/rotate/scale或blur/contrast等值；对opacity、background-color等属性无效，因其动画层叠规则为后声明覆盖前声明。
animation-composition 只对 transform 和 filter 有效，设了也没用——除非你正在叠加 translate、rotate、scale 或 blur、contrast 这类属性。
为什么 animation-composition 设了却没反应
常见错误是给 opacity、background-color、left、height 这类属性加 animation-composition: add，结果毫无变化。因为这个属性根本不处理它们。浏览器对这些属性的动画层叠规则就是“后声明覆盖前声明”，animation-composition 压根不介入。
- 真正起效的场景只有两个：
transform（如translateX(10px)+rotate(30deg)）和filter（如blur(2px)+grayscale(0.5)） - 如果多个动画都改
transform，但没写animation-composition，默认就是replace—— 后一个动画会把前一个的整个transform值完全替换掉，不是“加进去” - 检查是否生效：打开 Chrome DevTools → Elements → 找到元素 → 展开
transform计算值，看它是不是你预期的组合结果（比如translateX(100px) rotate(45deg)），而不是只有一项
replace / add / accumulate 到底怎么选
三者不是性能或语义差异，而是数学行为不同，尤其在连续叠加时表现分叉：
-
replace：默认值，新动画直接抹掉旧动画对该属性的所有影响 -
add：纯数值相加，translateX(10px)+translateX(20px)=translateX(30px)；但rotate(90deg)+rotate(90deg)在某些旧实现里可能因浮点误差变成rotate(179.999deg) -
accumulate：基于矩阵运算累加，旋转、缩放、skew 更稳定，rotate(90deg)+rotate(90deg)稳定输出rotate(180deg)；但 Safari 目前不支持，Chrome 125+ 才完整支持 - 简单位移/缩放叠加？
add足够；涉及多次旋转或斜切？先试accumulate，再用 DevTools 验证计算值是否精确
animation-composition 的值顺序必须和 animation 声明严格对齐
它不是全局开关，而是一组映射关系。漏一个值、多一个值、顺序错一位，都会静默回退到 replace，且无任何报错提示：
- 写法必须是：
animation: slide 1s, spin 1.5s; animation-composition: add, replace; - 第一个
add对应slide，第二个replace对应spin；如果只写animation-composition: add;，浏览器会自动补上replace给spin，导致你想累加的slide没问题，但spin却覆盖了slide的transform - 所有动画必须声明在同一行
animation中，用逗号分隔；分开写两行animation会被后者完全覆盖，animation-composition失效 - 建议调试期显式写出全部参数：
animation: slide 1s ease 0s 1 forwards, spin 1.5s linear 0.2s infinite forwards;，避免缺省值错位
真正容易被忽略的兼容性坑
目前（2026年6月）animation-composition: accumulate 在 Safari 中仍为 undefined，且没有前缀方案；add 虽已进标准，但在部分 Android WebView（尤其是基于 Chromium 119 以下）中解析异常，表现为整条 animation-composition 声明被丢弃，退回到全 replace 行为。
- 生产环境若需最大兼容，优先用
add，并搭配 feature detection：if (CSS.supports('animation-composition', 'add')) { ... } - 不要依赖
animation-composition实现核心动效逻辑；关键路径仍建议合并进单个@keyframes，例如把位移和旋转写在同一套关键帧里 - DevTools 里的 “Animations” 面板默认只显示第一个动画，看不出
animation-composition是否生效；务必去 “Computed” 标签页查transform或filter的实时计算值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
