animation-composition

replace

効果値がプロパティの基盤値を上書きします。これが既定値です。

add

効果値は、プロパティの基盤値の上に構築されます。この演算は加算効果をもたらします。加算演算が可換でない種類のアニメーションの場合、オペランドの順序は、基礎値の後に効果値が続きます。

accumulate

効果値と基礎値は結合されます。加算処理が可換でない種類のアニメーションでは、オペランドの順序は基礎値の後に効果値が続きます。

@keyframes アットルールが対象とする各プロパティは、効果スタックに関連付けられています。効果スタックの値は、 CSS スタイルルールのプロパティの基礎値 (underlying value) と、キーフレームのプロパティの効果値 (effect value) を組み合わせて計算されます。 animation-composition プロパティは、基礎値と効果値の合成方法を指定するのに役立ちます。

例えば、下記の CSS の場合、 blur(5px) が基盤値で、 blur(10px) が効果値です。 animation-composition プロパティは、基礎値と効果値の効果を合成した後、最終的な効果値を生成する処理を指定します。

.icon:hover {
  filter: blur(5px);
  animation: 3s infinite pulse;
  animation-composition: add;
}

@keyframes pulse {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(20px);
  }
}

例えばこの例で、 animation-composition プロパティに異なる値を設定したとします。それぞれの場合の最終的な効果値は下記で説明するように計算されます。

• replace を指定すると、 blur(10px) は 0% のキーフレームで blur(5px) を置き換えます。これはプロパティの既定値です。
• add を指定すると、 0% のキーフレームの合成効果値は blur(5px) blur(10px) になります。
• accumulate を指定すると、 0% のキーフレームの合成効果値は blur(15px) になります。

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

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

下記の例では、様々な animation-composition の値を横に並べて効果を表示しています。

HTML

<div class="container">
  replace
  <div id="replace" class="target"></div>
</div>
<div class="container">
  add
  <div id="add" class="target"></div>
</div>
<div class="container">
  accumulate
  <div id="accumulate" class="target"></div>
</div>

CSS

ここで基盤値は translateX(50px) rotate(45deg) です。

.container {
  width: 230px;
  height: 200px;
  background: cyan;
  display: inline-block;
  text-align: center;
}

.target {
  width: 20px;
  height: 50px;
  background: green;
  border-radius: 10px;
  margin: 20px 0;
}

@keyframes slide {
  20%,
  40% {
    transform: translateX(100px);
    background: yellow;
  }
  80%,
  100% {
    transform: translateX(150px);
    background: orange;
  }
}

.target {
  transform: translateX(30px) rotate(45deg);
  animation: slide 5s linear infinite;
}
.target:hover {
  animation-play-state: paused;
}
#replace {
  animation-composition: replace;
}
#add {
  animation-composition: add;
}
#accumulate {
  animation-composition: accumulate;
}

結果

• replace を使用すると、 transform プロパティの 0%, 20% のキーフレームでの最終的な効果値は translateX(100px) になります（基盤の値である translateX(30px) rotate(45deg) を完全に置き換えます）。この場合、要素は 45deg から 0deg まで回転し、要素自体に設定された既定値から 0% マークで設定された回転しない値までアニメーションします。これが既定の動作です。
• add を使用すると、 transform プロパティの 0%, 20% のキーフレームでの最終的な効果値は、translateX(30px) rotate(45deg) に translateX(100px) が続きます。つまり、要素は右に 30px 移動し、45deg 回転し、さらに X 軸方向に 100px 移動します。
• accumulate を称すると、 0%, 20% キーフレームでの最終的な効果値は translateX(130px) rotate(45deg) になります。つまり、 2 つの X 軸の移動値 30px と 100px が結合または「累積」されます。

• CSS アニメーションの使用
• KeyFrameEffect の composite プロパティ
• 他の関連アニメーションプロパティ: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timeline, animation-timing-function