替换、添加或累积？这正是问题所在。
组合多种动画效果
借助 animation-composition 属性，您可以控制当多个动画同时影响同一属性时应执行的操作。
假设您对某个元素应用了此基本转换：
transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);
此外，您还有下面这组关键帧：
@keyframes adjust {
to {
transform: translateX(100px);
}
}
将这些关键帧应用于元素时，to 关键帧中的 transform 会替换现有的 transform。这是默认行为。
借助 animation-composition，您现在可以控制应该发生的情况，而不是使用默认 replace。接受的值包括：
replace：效果值会替换基础值。（默认）add：将效果值添加到基础值中。accumulate：效果值与基础值结合使用。
加法和累加之间的差别微乎其微。以 blur(2) 和 blur(3) 这两个值为例。相加在一起会产生 blur(2) blur(3)，但累积会产生 blur(5)。
就像装茶的杯子一样。将牛奶倒入水中时，会发生以下情况：
replace：茶会被移除，取而代之的是牛奶。add：牛奶已添加到杯中，但仍然叠加在茶之上。accumulate：将牛奶添加到茶中，由于它们都是液体，因此可以很好地混合。
演示
下面的演示中有三个灰色框已应用基本 transform 和 animation。
虽然这些框具有相同的动画，但会产生不同的结果，因为它们的 animation-composition 集不同：
第一个框设置为 animation-composition: replace。这是默认行为。在结束位置，transform 的原始 translateX(50px) rotate(45deg) 值直接被 translateX(100px) 替换。
第二个框设置为 animation-composition: add。在结束位置，translateX(100px) 会添加到原始 translateX(50px) rotate(45deg) 中，从而生成 translateX(50px) rotate(45deg) translateX(100px)。这会使框移动 50 像素，然后旋转 45°，再移动 100 像素。
第三个框设置为 animation-composition: accumulate。在结束位置，translateX(100px) 将以数学方式从原始转换添加到 translateX(50px)，从而产生 translateX(150px) rotate(45deg) 的转换。