移动端 CSS 动画叠加时为何效果异常？检查 animation-composition 属性
当多个动画同时作用于同一属性时，默认行为可能导致原有样式被完全覆盖，使用 animation-composition 属性可指定叠加方式。
理解动画叠加的底层机制
CSS 动画通过 @keyframes 定义关键帧，每个关键帧中的值称为效果值。元素在基础样式中定义的值称为底层值。当多个动画同时影响同一属性时，浏览器会构建一个效果栈，将底层值与每个动画的效果值进行组合。animation-composition 属性用于指定这种组合的具体操作方式，默认值为 replace。这意味着效果值会直接替换底层值，导致原有样式在动画过程中完全消失。
例如，若元素基础样式为 translateX(30px) rotate(45deg)，同时应用一个名为 slide 的动画。在 50% 关键帧中，效果值为 translateY(30px)。若未设置 animation-composition，最终效果值将仅为 translateY(30px)，原有的 translateX 和 rotate 将被忽略。这种机制可能导致动画效果与预期不符，特别是在需要保留原有变换或累积效果的场景中。
三种叠加模式的具体差异
animation-composition 支持三种关键字值：replace、add 和 accumulate。replace 是默认值，效果值直接替换底层值，不保留原有样式。add 将效果值附加到底层值之后，形成复合效果。accumulate 则将效果值与底层值相加，适用于可加性属性。对于不可交换的属性，底层值始终位于效果值之前。
以 blur 滤镜为例，底层值为 blur(5px)，动画关键帧 0% 处效果值为 blur(10px)。若设置 animation-composition: add，最终效果值为 blur(5px) blur(10px)，即两个模糊效果叠加。若设置为 accumulate，则计算为 blur(15px)，即数值相加。这种差异在移动端动画调试中尤为明显，错误的叠加模式可能导致视觉上的不连贯或性能问题。
多动画场景下的值循环应用
当同时应用多个动画时，animation-composition 属性需要指定多个逗号分隔的值。这些值将按照动画名称的顺序依次应用。如果动画数量与 composition 值数量不一致，值会循环使用，直到所有动画都分配到 composition 值。例如，若同时应用两个动画，但仅指定一个 composition 值，则两个动画将使用相同的叠加模式。
这种循环机制要求开发者明确指定每个动画的 composition 值，以避免意外的叠加行为。在移动端开发中，通常需要为不同的动画效果设置不同的 composition 模式，以确保视觉和性能的平衡。例如，一个动画用于位移，另一个用于旋转，可能需要分别设置 add 或 accumulate，以避免冲突。
排查步骤与验证方法
首先，检查元素是否同时应用了多个动画，并确认它们是否作用于同一属性。在浏览器开发者工具中，使用元素检查器查看计算后的样式，确认底层值和效果值是否正确。其次，在 CSS 中为每个动画单独设置 animation-composition 值，观察效果是否符合预期。最后，使用 MDN 提供的示例代码进行对比测试，验证不同 composition 模式下的行为差异。
验证结果时，重点关注动画过程中是否保留了原有样式，以及叠加效果是否符合设计需求。例如，若期望动画在原有位移基础上增加旋转，应设置 animation-composition: add。若期望累积位移距离，则应设置为 accumulate。通过逐步调整 composition 值，可以找到最适合的叠加方式。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。