CSS animation-composition 怎样叠加多个动画效果

当一个元素本来已经有 transform，又通过 @keyframes 改同一个属性时，动画值到底是覆盖原值，还是在原值上继续叠加？animation-composition 就是用来回答这个问题的。它把“基础样式值”和“关键帧效果值”的合成方式明确分成 replace、add、accumulate 三种。

官方地址：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-composition

默认的 replace 会让关键帧效果覆盖基础值；需要保留原有变换时用 add，需要把同类数值合并时再考虑 accumulate。多动画场景还要让组合值和 animation-name 的顺序一一对应。

animation-composition 先解决哪一层值的冲突

可以先把一个动画属性拆成三层：元素规则里的基础值是 underlying value，@keyframes 提供 effect value，浏览器再按照组合运算得到最终值。没有显式声明时，组合运算就是 replace，所以关键帧中的变换会把基础变换整体换掉。

这也是很多“旋转突然消失”的原因：基础规则写了 translateX(24px) rotate(8deg)，关键帧只写了 translateY(30px)，默认的 replace 不会替你把两段 transform 自动拼接。

用三种值看清覆盖与叠加差异

下面的例子故意保留一个基础平移，再让关键帧改变同一个 transform 属性。代码中的注释只说明本例的合成边界，不把每一行都写成解释。

.target {
  /* 基础值属于 underlying value，会参与后续组合 */
  transform: translateX(24px) rotate(8deg);
  animation: slide 3s linear infinite;
}

@keyframes slide {
  50% {
    /* effect value 只提供这一帧的位移效果 */
    transform: translateY(30px);
  }
}

.replace {
  /* 默认语义：关键帧效果替换基础 transform */
  animation-composition: replace;
}

.add {
  /* 保留基础 transform，并把效果值追加到后面 */
  animation-composition: add;
}

.accumulate {
  /* 对可累加的数值尝试合并同类成分 */
  animation-composition: accumulate;
}

replace 在 50% 处只留下 translateY(30px)；add 会把效果放到基础值之后，形成类似 translateX(24px) rotate(8deg) translateY(30px) 的组合；accumulate 更像把可合并的同类数值相加。对变换函数来说，函数顺序和变换坐标系仍然重要，不能把 add 简化成“所有字符串直接相连”。

多个动画怎样对应多个组合值

当 animation-name 写了多个名称时，animation-composition 也可以写逗号分隔的列表。列表按动画名称出现的顺序映射，而不是按关键帧文件的书写顺序映射。

.card {
  /* 第一个名称对应第一个组合值，第二个名称对应第二个组合值 */
  animation-name: slide, pulse;
  animation-duration: 2s, 1s;
  animation-iteration-count: infinite, infinite;
  animation-composition: add, accumulate;
}

@keyframes slide {
  to { transform: translateX(20px); }
}

@keyframes pulse {
  to { transform: scale(1.04); }
}

如果名称有三个而组合值只写两个，组合值会从列表开头循环分配，不能理解成“第三个动画没有组合规则”。为了降低维护成本，最好让两个列表长度一致，并把每个动画的组合语义写在相邻位置。

迁移时最容易漏掉的三个边界

• 简写会重置它：animation 是组合简写，写在后面的简写可能把 animation-composition 重置回初始值。稳定写法是先写简写，再单独声明组合属性。
• 不要把 add 当成无条件相加：不同 CSS 属性的组合规则不同，非交换的运算还会受基础值与效果值顺序影响。
• 给旧浏览器留退路：当前 MDN 将该特性标为广泛可用，但如果页面必须支持很旧的浏览器，应让默认布局在没有叠加语义时仍可读，或把关键变换拆到不同元素。

迁移旧动画时，可以按“先保留默认 replace，再逐个改成 add，最后检查多个名称的列表顺序”来做回归。重点不是让动画更复杂，而是明确哪个值属于基础样式、哪个值属于关键帧效果，以及最终组合是否符合组件的视觉意图。

相关问题

为什么写了 add 还是看不到旋转？先检查是否有后面的 animation 简写重置了组合值，再检查关键帧是否确实作用在同一个元素和同一个属性上。

replace、add、accumulate 应该怎么选？要完全接管关键帧效果就用 replace；要保留基础效果并追加新效果优先考虑 add；只有确认属性的同类值可以按累积语义合并时才用 accumulate。