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>

列印頁面