CSS - 动画组合属性

CSS 属性 `animation-composition` 定义了当多个动画同时作用于同一属性时要应用的复合操作。

在 CSS 动画中，`@keyframes` 针对的属性具有关联的效果堆栈。
效果堆栈的值是由 CSS 样式规则中的底层属性值与关键帧中属性的效果值组合产生的。
`animation-composition` 属性定义了为特定属性组合这些值的方法。

可能的值

`replace` - 默认值为效果值，优先于属性的底层值。
`add` - 效果值通过加法运算增加现有属性值。对于加法运算不满足交换律的动画类型，操作数的顺序为基值后跟效果值。
`accumulate` - 效果值和底层值合并。对于加法运算不满足交换律的动画类型，操作数的顺序为基值后跟效果值。

语法

animation-composition = <single-animation-composition>#  

<single-animation-composition> = replace | add | accumulate

应用于

所有 HTML 元素。

CSS animation-composition - replace 值

以下示例演示了在 `animation-composition` 中使用 `replace` 值。`replace` 组合 ( `#replace-demo` ) 会导致盒子在每次动画迭代开始时重置到其起始位置，并完全替换先前状态。

<html>
<head>
<style>
   @keyframes moveRight {
      0%, 100% {
      transform: translateX(0);
      background-color: lightblue;
      }
      50% {
      transform: translateX(100px);
      background-color: lightcoral;
      }
   }
   .box {
      width: 100px;
      height: 100px;
      margin: 20px;
      display: inline-block;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      border: 2px solid #333;
   }
   #replace-demo {
      animation-name: moveRight;
      animation-composition: replace;
   }
   .container {
      text-align: center;
      margin-top: 50px;
   }
   .label {
      font-weight: bold;
      margin-bottom: 10px;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="label">Replace Composition</div>
      <div class="box" id="replace-demo"></div>
   </div>
</body>
</html>

CSS animation-composition - add 值

以下示例演示了在 `animation-composition` 中使用 `add` 值。`add` 组合 ( `#add-demo` ) 会产生累加效果，其中盒子在每次迭代中都会进一步向右移动，因为位移是累积的。

<html>
<head>
<style>
   @keyframes moveRight {
      0%, 100% {
      transform: translateX(0);
      background-color: lightblue;
      }
      50% {
      transform: translateX(100px);
      background-color: lightcoral;
      }
   }
   .box {
      width: 100px;
      height: 100px;
      margin: 20px;
      display: inline-block;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      border: 2px solid #333;
   }
   #add-demo {
      animation-name: moveRight;
      animation-composition: add;
   }
   .container {
      text-align: center;
      margin-top: 50px;
   }
   .label {
      font-weight: bold;
      margin-bottom: 10px;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="label">Add Composition</div>
      <div class="box" id="add-demo"></div>
   </div>
</body>
</html>

CSS animation-composition - accumulate 值

以下示例演示了在 `animation-composition` 中使用 `accumulate` 值。`accumulate` 组合 ( `#accumulate-demo` ) 也累积变换，但与 `add` 不同，它保留了先前的状态而无需重置，导致在多次迭代中连续累积平移。

<html>
<head>
<style>
   @keyframes moveRight {
      0%, 100% {
      transform: translateX(0);
      background-color: lightblue;
      }
      50% {
      transform: translateX(100px);
      background-color: lightcoral;
      }
   }
   .box {
      width: 100px;
      height: 100px;
      margin: 20px;
      display: inline-block;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      border: 2px solid #333;
   }
   #accumulate-demo {
      animation-name: moveRight;
      animation-composition: accumulate;
   }
   .container {
      text-align: center;
      margin-top: 50px;
   }
   .label {
      font-weight: bold;
      margin-bottom: 10px;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="label">Accumulate Composition</div>
      <div class="box" id="accumulate-demo"></div>
   </div>
</body>
</html>

打印页面