DOM

：

：

Animation.effect プロパティ

　編集：2022.10.23 by T.A.

[Edge]。→、、

アニメーション Animation のターゲットへのアニメーション効果を取得／設定します。

mdn： ターゲット効果は、AnimationEffect に基づくタイプの効果オブジェクトで、KeyframeEffect、または null。

構文
Animation.effect
Animation Animation
値

アニメーションのターゲット アニメーション効果を表す AnimationEffect オブジェクト。またはアクティブな効果がないことを示す null。

例
簡単な Web アニメーションと effect

HTML： 

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

JavaScript： 

KF=new KeyframeEffect(  //キーフレームの指定：
  IdTest, 
  [
    {transform:'translateX(0)'}, {transform:'translateX(200px)'}  //X軸移動。
  ], 
  {duration:3000, fill:'forwards'}  //3000ms掛けて、？。
);
Ani=new Animation(KF, document.timeline);  //アニメーション再生。
Ani.play();

JavaScript： effect を得る。 

D=Ani.effect;  //＝[object]：[object KeyframeEffect]。アニメーション動作中に取得。
	//target＝[object]：[object HTMLDivElement]
	//pseudoElement＝[object]：null
	//composite＝[string]：replace
	//…

JavaScript： effect の設定。 

KF2=new KeyframeEffect(  //キーフレームの指定：
  IdTest, 
  [
    {transform:'translateX(0)'}, {transform:'translateX(-50px)'}  //X軸移動。
  ], 
  {duration:3000, fill:'forwards'}  //3000ms掛けて、？。
);
Ani.effect=KF2;

実行したら、その通りのアニメーション動作をした。

JavaScript： effect に null を設定。 

Ani.effect=null;

初期の状態に戻った。

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

テスト