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-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
プロパティは、基礎値と効果値の効果を合成した後、最終的な効果値を生成する処理を指定します。
.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 値の理解
下記の例では、様々な 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)
です。
@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
が結合または「累積」されます。
仕様書
Specification |
---|
CSS Animations Level 2 # animation-composition |
ブラウザーの互換性
BCD tables only load in the browser