指定如何结合利用 animation-composition 来合成多个动画效果

是替换、添加还是累积？这就是问题所在。

Bramus

组合使用多种动画效果

借助 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) 的转换。

照片由 Alex Boyd 拍摄，选自 Unsplash