DOM

：

：

KeyframeEffect.composite プロパティ

　編集：2022.10.24 by T.A.

[Edge]。→、、

KeyframeEffect が現在のプロパティ値にどのように影響するかを文字列で取得／設定します。

構文
KeyframeEffect.composite
KeyframeEffect KeyframeEffect オブジェクト。
値

以下の文字列。

たとえば、現在の keyframeEffect 値 blur(2) であるとし、次に blur(3) を作用させる場合：

replace
keyframeEffect は、それが組み合わされた基になる値を上書きします。blur(2) は、blur(3) を置き換えます。
add
keyframeEffect は、それが組み合わされた基になる値に追加されます（別名、加算）: blur(2) blur(3)。
accumulate
keyframeEffect は、基礎となる値（blur(5)）に蓄積されます。
例
簡単なアニメーション

HTML： 

<DIV id=IdTest style="width:1em">■</DIV>
<SPAN id=IdLog></SPAN>

JavaScript： 

KE=new KeyframeEffect(  //アニメーション効果：
  IdTest,  //ターゲット要素。
  [        //キーフレーム。
    {transform:'translateX(100px)'}  //X軸移動。
  ], 
  {duration:1000, fill:'forwards'}  //掛ける時間、プロパティ反映の仕方。
);
D=KE.composite;
KE.composite="accumulate";
Ani=new Animation(KE);  //アニメーション生成。
Ani.play();  //再生。

→new KeyframeEffect()。

→CSS：transform。CSS：translateX()。duration、fill。

→new Animation()、play()。

テスト