CSS动画编排：使用`animation-composition`控制多个动画的累加与替换行为 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CSS 动画编排：使用 `animation-composition` 控制多个动画的累加与替换行为

大家好，今天我们来深入探讨一个相对较新的 CSS 属性：animation-composition。这个属性允许我们更精细地控制当多个动画同时作用于同一个元素，并尝试修改同一属性时，它们之间的相互作用方式。理解 animation-composition 对于创建复杂、流畅且可预测的动画至关重要。

动画冲突与 `animation-composition` 的引入

在 CSS 动画中，我们经常会遇到多个动画同时影响同一个元素的情况。例如，一个动画可能控制元素的透明度，而另一个动画控制元素的位置。这种情况下，浏览器需要决定如何处理这些冲突。

在 animation-composition 出现之前，浏览器采用一种简单的“后应用”策略：后定义的动画会覆盖先定义的动画。虽然这种方式在某些情况下可以正常工作，但在更复杂的场景下，会导致动画效果难以预测和控制。

animation-composition 的引入正是为了解决这个问题。它允许我们显式地指定动画属性值如何组合，提供了四种不同的组合模式：replace、add、accumulate 和 auto。

`animation-composition` 的四种取值

下面我们来详细讲解 animation-composition 的四种取值，并通过代码示例进行说明。

replace (默认值)

这是 animation-composition 的默认值。当使用 replace 时，后应用的动画会完全替换先前应用的动画。这意味着只有最后一个动画的属性值会被使用，之前的动画效果会被忽略。

<!DOCTYPE html>
<html>
<head>
<style>
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: move 3s linear infinite,
               fade 3s linear infinite;
    animation-composition: replace; /* 默认值，可省略 */
}

@keyframes move {
    0% { left: 0; }
    50% { left: 200px; }
    100% { left: 0; }
}

@keyframes fade {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

在这个例子中，move 动画控制元素的 left 属性，而 fade 动画控制元素的 opacity 属性。由于 animation-composition 设置为 replace（默认值），两个动画的属性值会各自独立地起作用，互不干扰。元素会来回移动，同时改变透明度。

add

add 模式将动画的属性值相加。这种模式通常用于数值类型的属性，例如 transform、opacity、margin 等。如果属性不是数值类型，add 的行为类似于 replace。

<!DOCTYPE html>
<html>
<head>
<style>
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: move 3s linear infinite,
               rotate 3s linear infinite;
    animation-composition: add;
}

@keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

在这个例子中，move 动画使用 translateX 改变元素的位置，而 rotate 动画使用 rotate 旋转元素。由于 animation-composition 设置为 add，两个动画的 transform 值会相加。这意味着元素不仅会来回移动，还会同时旋转。需要注意的是，动画的值是相加的，这可能会导致一些意想不到的结果，例如 translateX(200px) rotate(180deg)。

accumulate

accumulate 模式与 add 类似，也是将动画的属性值进行某种形式的合并。但 accumulate 的主要区别在于，它会考虑动画的起始值，并在此基础上进行累加。这意味着它可以更好地处理动画值的上下文关系。

accumulate 的具体行为取决于属性的类型。对于数值类型，它通常表现为加法。对于其他类型，其行为可能与 replace 类似，或者取决于浏览器具体的实现。
```
<!DOCTYPE html>
<html>
<head>
<style>
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: grow 3s linear infinite,
               shrink 3s linear infinite;
    animation-composition: accumulate;
}

@keyframes grow {
    0% { width: 100px; height: 100px; }
    50% { width: 150px; height: 150px; }
    100% { width: 100px; height: 100px; }
}

@keyframes shrink {
    0% { width: 100px; height: 100px; }
    50% { width: 50px; height: 50px; }
    100% { width: 100px; height: 100px; }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
```
在这个例子中，grow 动画增加元素的宽度和高度，而 shrink 动画减小元素的宽度和高度。由于 animation-composition 设置为 accumulate，两个动画的尺寸变化会累加。这意味着元素的尺寸会在 50px 和 150px 之间变化，而不是像 replace 那样，只显示最后一个动画的效果。需要注意的是，如果使用 add，可能会导致尺寸变为负数。

auto

auto 模式让浏览器自行决定如何组合动画。浏览器的具体行为取决于属性的类型和动画的效果。对于大多数属性，auto 的行为通常与 replace 相同。然而，对于某些属性，例如 transform，浏览器可能会选择更智能的组合方式，例如插值。

<!DOCTYPE html>
<html>
<head>
<style>
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: move 3s linear infinite,
               rotate 3s linear infinite;
    animation-composition: auto;
}

@keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

在这个例子中，animation-composition 设置为 auto。对于 transform 属性，浏览器可能会选择对 translateX 和 rotate 的值进行插值，从而产生更平滑的动画效果。但需要注意的是，auto 的行为可能因浏览器而异，因此不建议过度依赖它。

`animation-composition` 的应用场景

animation-composition 在许多场景下都非常有用。以下是一些常见的应用场景：

创建复杂的组合动画： 通过将多个简单的动画组合起来，可以创建出更复杂的动画效果。animation-composition 允许我们控制这些动画之间的相互作用，确保最终效果符合预期。
实现动画的叠加效果： 有时，我们希望在现有动画的基础上添加额外的效果。例如，我们可能希望在元素移动的同时，使其逐渐淡出。animation-composition 可以让我们轻松实现这种叠加效果。
解决动画冲突： 当多个动画同时修改同一个属性时，animation-composition 可以帮助我们解决冲突，确保动画效果的一致性和可预测性。
创建更自然的动画： 通过使用 add 或 accumulate，我们可以模拟更自然的物理效果，例如重力、摩擦力等。

`animation-composition` 的注意事项

在使用 animation-composition 时，需要注意以下几点：

并非所有属性都适用： add 和 accumulate 主要适用于数值类型的属性。对于其他类型的属性，其行为可能与 replace 类似，或者取决于浏览器具体的实现。
浏览器兼容性： animation-composition 是一个相对较新的属性，并非所有浏览器都支持。在使用时，需要注意浏览器兼容性，并提供适当的 fallback 方案。
性能： 复杂的动画组合可能会对性能产生影响。在使用 animation-composition 时，需要注意优化动画效果，避免过度使用。

代码示例：使用 `animation-composition` 创建一个呼吸效果

下面我们通过一个更完整的代码示例，演示如何使用 animation-composition 创建一个呼吸效果。

<!DOCTYPE html>
<html>
<head>
<style>
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #4CAF50;
  animation: breathe 4s ease-in-out infinite,
             pulse 4s ease-in-out infinite;
  animation-composition: add;
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(76, 175, 80, 0);
  }
}
</style>
</head>
<body>
  <div class="circle"></div>
</body>
</html>

在这个例子中，我们创建了一个圆形元素，并应用了两个动画：breathe 和 pulse。breathe 动画控制元素的缩放和透明度，使其看起来像在呼吸。pulse 动画控制元素的阴影，使其看起来像在跳动。

通过将 animation-composition 设置为 add，我们将两个动画的效果叠加在一起，从而创建出一个更生动、更自然的呼吸效果。

表格总结四种模式

取值	描述	适用场景
`replace`	后应用的动画会完全替换先前应用的动画。只有最后一个动画的属性值会被使用。	默认行为，适用于大多数场景，特别是当动画之间存在冲突时。
`add`	将动画的属性值相加。适用于数值类型的属性，例如 `transform`、`opacity`、`margin` 等。如果属性不是数值类型，`add` 的行为类似于 `replace`。	创建动画的叠加效果，例如将多个 `transform` 效果组合在一起。
`accumulate`	与 `add` 类似，也是将动画的属性值进行某种形式的合并。但 `accumulate` 会考虑动画的起始值，并在此基础上进行累加。这意味着它可以更好地处理动画值的上下文关系。`accumulate` 的具体行为取决于属性的类型。对于数值类型，它通常表现为加法。对于其他类型，其行为可能与 `replace` 类似，或者取决于浏览器具体的实现。	需要考虑动画值的上下文关系时，例如模拟物理效果。
`auto`	让浏览器自行决定如何组合动画。浏览器的具体行为取决于属性的类型和动画的效果。对于大多数属性，`auto` 的行为通常与 `replace` 相同。然而，对于某些属性，例如 `transform`，浏览器可能会选择更智能的组合方式，例如插值。	当希望浏览器自行优化动画效果时，但需要注意不同浏览器可能存在差异，不建议过度依赖。

理解 `animation-composition` 以进行更精细的动画控制

animation-composition 提供了一种更精细的方式来控制 CSS 动画的组合，允许开发者创建更复杂、更自然的动画效果。通过理解 replace、add、accumulate 和 auto 这四种不同的取值，我们可以更好地控制动画之间的相互作用，并解决动画冲突。

希望今天的讲解对大家有所帮助，谢谢！

更多IT精英技术系列讲座，到智猿学院