DOM

：

：

KeyframeEffect.setKeyframes() メソッド

　編集：2022.10.24 by T.A.

[Edge]。→、、

KeyframeEffect のキーフレームを新しいキーフレームのセットに置き換えます。

構文
KeyframeEffect.setKeyframes(keyframes)
KeyframeEffect KeyframeEffect オブジェクト。
keyframes キーフレーム オブジェクトまたは null。→keyframes

null に設定すると、キーフレームは一連の空のキーフレームに置き換えられます。

戻り値

なし（undefined）。

例外
TypeError
1 つまたは複数のフレームが正しいタイプのオブジェクトではないか、キーフレームがオフセットによって大まかに並べ替えられていないか、またはオフセットが 0 未満または 1 より大きいキーフレームが存在していました。

注： キーフレームを処理できないか、形式が正しくない場合、KeyframeEffect のキーフレームは変更されません。

例
簡単なアニメーション

HTML： 

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

JavaScript： 

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

これでは、完全な置き換えになってしまった。

JavaScript： 

KE=new KeyframeEffect(  //アニメーション効果：
  IdTest,  //ターゲット要素。
  [        //キーフレーム。
    {transform:'translateX(0)', color:'red'}
    , {transform:'translateX(200px)', color:'black'}  //X軸移動、透明度。
  ], 
  {duration:3000, fill:'forwards'}  //掛ける時間、プロパティ反映の仕方。
);
D=KE.getKeyframes();
D[1].transform='translateX(100px)';
D[1].computedOffset=0.5;
D[2].transform='translateY(30px)';  //エラー発生：Cannot set properties of undefined (setting 'transform')
	//未定義のプロパティを設定できません (「変換」を設定)
D[2].computedOffset=1;
KE.setKeyframes(D);
Ani=new Animation(KE);  //アニメーション生成。
Ani.play();  //再生。

→new KeyframeEffect()。

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

→new Animation()、play()。

テスト