animation-composition

Baseline 2023

Newly available

Since July 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

animation-compositionCSS のプロパティで、複数のアニメーションが同じプロパティに同時に影響する場合に使用する合成演算を指定します。

構文

css
/* 単一のアニメーション */
animation-composition: replace;
animation-composition: add;
animation-composition: accumulate;

/* 複数のアニメーション */
animation-composition: replace, add;
animation-composition: add, accumulate;
animation-composition: replace, add, accumulate;

/* グローバル値 */
animation-composition: inherit;
animation-composition: initial;
animation-composition: revert;
animation-composition: revert-layer;
animation-composition: unset;

メモ: 複数の値をカンマ区切りで animation-* プロパティに指定すると、animation-nameが出現した順にアニメーションに適用されます。アニメーションと合成の数が異なる場合、animation-composition プロパティに列挙されている値は、最初の animation-name から最後の animation-name まで循環し、すべてのアニメーションに animation-composition 値が割り当てるまで繰り返されます。より詳しい情報は、複数のアニメーションプロパティ値の設定を参照してください。

replace

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

add

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

accumulate

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

解説

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

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

css
.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) になります。

メモ: 合成演算は、キーフレーム内で指定することもできます。その場合、指定した合成演算は、まずそのキーフレーム内の各プロパティに対して使用され、次に次のキーフレーム内の各プロパティに対して使用されます。

公式定義

初期値replace
適用対象すべての要素
継承なし
計算値指定通り
アニメーションの種類アニメーション不可

形式文法

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

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

animation-composition 値の理解

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

HTML

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) です。

css
@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 軸の移動値 30px100px が結合または「累積」されます。

仕様書

Specification
CSS Animations Level 2
# animation-composition

ブラウザーの互換性

BCD tables only load in the browser

関連情報