🧚

动画合成

在同一个元素上使用多个 CSS 动画除了性能问题以及增加维护和调试困难之外还会增加冲突，甚至让动画不可控，造成混乱。

冲突：不同的动画可能会同时修改相同的 CSS 属性，导致冲突和不一致。例如，一个动画试图将元素向左移动，而另一个动画同时试图将元素向右移动

不可控：多个动画可能会导致元素的状态变得复杂，难以预测和控制。这可能会导致不可预测的动画效果。例如，一个动画试图将元素向右移动，而另一个动画同时试图将元素向上移动

混乱：多个动画可能会导致动画效果重叠，使元素的行为变得混乱。例如，一个动画正在逐渐淡出元素，而另一个动画同时试图将元素放大

animation-composition: add;

一、CSS 动画合成是什么？

CSS 动画合成（animation-composition）是指同时使用多个 CSS 动画效果来影响同一属性时，通过一些属性和方法来控制这些动画如何组合影响动画元素的属性值。这使得在多个动画效果同时作用于元素时，可以更加灵活地控制动画的表现方式，包括属性值的叠加、替换等。

CSS 动画合成通常使用 CSS 的 animation-composite 或 WAPPI 的 composite 方法来实现。这有助于避免不必要的复杂性和冲突，使多个动画效果可以协同工作，以创建更加复杂和吸引人的动画效果。

简单地对 animation-composition 属性值含义做个描述：

replace （替换） ：这是 animation-composition 属性的默认行为。当多个动画同时影响同一个属性时，最后一个动画会完全替换之前的动画效果。换句话说，只有最后一个动画的效果会应用到属性上。例如前面示例中的 rotate 动画完全替代了 move 动画，所以最终只有旋转的动画效果。

add （叠加） ：使用 add 复合操作时，多个动画的效果会叠加在一起。这意味着它们会一起影响属性的最终值。例如，如果一个动画元素向右移动 30px ，而另一个动画使元素向左移动 20px ，使用 add 复合操作之后，元素将向右移动 10px

accumulate （累积） ：使用 accumulate 复合操作时，动画效果会逐渐累积在一起，而不是替换或叠加。这意味着每个动画都会根据之前动画的效果来计算最终效果。例如上面的滤镜示例，元素默认有一个 blur(5px) ，filter 动画的 0% 位置有一个 blur(10px) ，使用 accumulate 复合操作后，0% 关键帧的 filter 属性的复合值是 blur(15px)