KeyframeEffect: composite プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2022年9月以降、すべてのブラウザーで利用可能です。

composite は KeyframeEffect のプロパティで、要素のアニメーションがその基盤となるプロパティ値に与える影響を決定します。

値

これらの値を理解するには、blur(3) という基盤プロパティ値に対して blur(2) という keyframeEffect 値が動作する例を取って考えてみましょう。

replace: keyframeEffect は組み合わせられる値で基盤の値を置換します。つまり blur(2) で blur(3) を置き換えます。
add: keyframeEffect は組み合わせられる値を基盤の値に追加します。つまり blur(2) blur(3) となります。
accumulate: keyframeEffect は組み合わせられる値を基盤の値に累積します。つまりblur(5) となります。