KeyframeEffect: composite プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨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) となります。