DOM

：

：

KeyframeEffect.target プロパティ

　編集：2022.10.24 by T.A.

[Edge]。→、、

KeyframeEffect に割り当てられている要素または疑似要素を表します。

mdn： アニメーション化されている要素または疑似要素を表します。特定の要素を対象としないアニメーションの場合は null になる場合があります。ゲッターとセッターの両方として機能し、ただし、CSS によって生成されるアニメーションとトランジションは除きます。

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

Element または CSSPseudoElement、または null。

例
簡単なアニメーション

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.target;

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

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

→new Animation()、play()。

疑似要素

以下のCSSが組み込んであります： 


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


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


 
target は得られなかった。
 
→querySelector()。









テスト