CSS animation-composition 怎么叠加 transform：add、accumulate 与关键帧冲突排查

一个卡片同时需要“入场时缩小放大”“悬停向上移动”和“图标持续旋转”时，最容易出现的结果不是动画不动，而是后声明的 transform 把前面的效果顶掉。animation-composition 可以把这个冲突变成明确的合成规则：让动画替换当前值，或者把多个 transform 叠加起来。

先看一个典型冲突：两个动画都在改 transform

下面的卡片希望入场时从 scale(.96) 变为 scale(1)，同时在鼠标悬停时向上移动 6px：

.card {
  animation: enter 360ms ease-out both;
}

.card:hover {
  animation: lift 180ms ease-out both;
}

@keyframes enter {
  from { transform: translateY(8px) scale(.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes lift {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

这段代码的问题在于两个动画都产生 transform。如果没有额外声明，浏览器会按照默认的替换行为处理，最终看到的通常只有当前优先级更高或更晚生效的那组变换。动画的透明度可能正常，但位移和缩放会互相覆盖。

这里先不要把所有变换复制到每个关键帧里。那样虽然能暂时“修好”，但后续再加旋转或修改 hover 位移时，维护成本会迅速上升。

replace、add、accumulate 到底差在哪里

animation-composition 控制的是动画效果合成。它可以写在动画声明上，也可以用逗号为多组动画分别指定规则。

.card {
  animation:
    enter 360ms ease-out both,
    lift 180ms ease-out both;
  animation-composition: replace, add;
}

三种值可以先按下面的工程判断理解：

对这个卡片案例，入场动画负责“从哪里来”，悬停动画负责“额外抬高多少”，所以更适合让它们分别承担主值和增量。实际项目中要先确认两组关键帧的时间是否重叠；如果 hover 在入场结束后才发生，合成效果和同时运行时并不相同。

用 add 叠加 transform：先拆职责，再验收结果

一个更容易调试的写法，是把每个动画限制在自己的职责内：

.card {
  animation:
    enter 360ms ease-out both,
    lift 180ms ease-out both;
  animation-composition: replace, add;
}

@keyframes enter {
  from { transform: translateY(8px) scale(.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes lift {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

验收时不要只看“有没有动”。打开 DevTools 的 Computed 面板，分别检查入场结束后的矩阵和 hover 状态下的最终位置。一个实用的验收表如下：

• 入场结束后：透明度为 1，卡片回到布局位置，缩放为 1。
• 悬停时：卡片在入场最终状态上额外上移约 6px，而不是重新回到默认位置。
• 鼠标移出后：卡片回到入场结束状态，不留下额外的缩放或旋转。
• 键盘聚焦时：若交互等价，:focus-visible 也要提供同样的可感知反馈。

如果动画涉及不同的 transform 函数，仍应把顺序写清楚。translateX(8px) rotate(5deg) 与 rotate(5deg) translateX(8px) 的视觉结果可能不同，合成规则不会替你修正变换顺序。

什么时候应该使用 accumulate

accumulate 不只是“再加一遍”。它依赖属性本身是否支持累积以及两个值如何相加。对数值、角度和部分变换，累积可能有明确语义；对无法相加的值，浏览器仍需要按照该属性的合成规则处理。

例如一个循环动画每次让图标旋转 90deg，如果业务要表达“后一段继续接着前一段转”，可以考虑累积语义。但若只是让一个 hover 位移附着到入场动画上，add 通常更直观，团队成员也更容易从声明读出意图。

.badge {
  animation: pulse 500ms ease-in-out 2;
  animation-composition: accumulate;
}

@keyframes pulse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(90deg); }
}

这类代码要重点测试重复次数、循环方向和动画结束后的填充模式。不要只在一次播放时确认结果，因为 both、forwards 与循环次数会改变最终样式的观察窗口。

兼容降级：不识别 animation-composition 时怎么办

新属性的降级重点不是模拟所有组合效果，而是保证内容和基本交互仍然可用。可以先把关键状态写成一个不依赖合成的单动画版本，再用特性查询增强支持它的浏览器：

.card {
  animation: enter 360ms ease-out both;
}

@supports (animation-composition: add) {
  .card {
    animation:
      enter 360ms ease-out both,
      lift 180ms ease-out both;
    animation-composition: replace, add;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .card:hover {
    animation: none;
    transform: none;
    transition: none;
  }
}

如果旧环境也必须保留 hover 位移，可以把入场状态放到一个包装元素，把 hover 变换放到内部元素。两个元素各自拥有一个 transform，不需要依赖合成：

订单摘要

这种结构多一个节点，却能把兼容策略变成普通 CSS。对于组件库，建议把它写进组件验收，而不是等某个浏览器报告“动画不对”后再补。

常见问题

animation-composition 能解决任意两个 CSS 属性冲突吗？

不能。它主要解决动画效果的合成，属性是否可加、如何加仍由该属性的定义决定。无法合成的值需要改用包装元素、CSS 变量或单一关键帧。

为什么写了 add，缩放结果还是不对？

先检查两个关键帧的 transform 函数和顺序，再确认动画声明的逗号顺序。合成是按效果列表处理的，函数顺序不同会改变最终矩阵。

应该优先写 add 还是 accumulate？

如果需求是把一个小动作附着到另一个动作上，优先从 add 开始；只有当需求明确依赖可累积的数值或变换过程时，再使用 accumulate。

没有 animation-composition 的浏览器会完全没有动画吗？

不会，只要保留基础的单动画声明，仍可提供入场或状态反馈。用 @supports 把增强组合包起来即可。

把动画合成写成组件约定

当一个组件同时拥有入场、悬停和反馈动画时，先给每个动画分配职责，再决定是替换还是叠加。最后用 DevTools、键盘操作和减少动态效果设置各验收一次，能比单纯调时长更快定位问题。