DOM

：

：

KeyframeEffect.iterationComposite プロパティ

　編集：2022.10.24 by T.A.

[Edge]⛌。実験的。→、、

実験的： これは実験的な技術です。これを本番環境で使用する前に、ブラウザーの互換性表を注意深く確認してください。

KeyframeEffect のアニメーション反復ごとに、アニメーションのプロパティ値の変化がどのように蓄積または相互に上書きされるかを解決します。

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

次のいずれかの文字列：

replace
生成される keyframeEffect の値は、現在の反復とは無関係です。
accumulate
keyframeEffect の後続の反復は、前の反復の最終値に基づいて構築されます。
例
簡単なアニメーション

HTML： 

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

JavaScript： 

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

//Ani.play();  //再生。

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

→new Animation()、play()。

テスト