DOM

：

：

KeyframeEffect コンストラクター

　編集：2022.10.23 by T.A.

[Edge]。→、、

新しい KeyframeEffect オブジェクトのインスタンスを返します。

また、既存のキーフレーム効果オブジェクト インスタンスを複製することもできます。

構文

新しいキーフレームの生成：

new KeyframeEffect(target, keyframes[, options])
target アニメーション化する DOM 要素オブジェクト、または null。
keyframes keyframes オブジェクト、または null。
options 任意。アニメーションの長さ（ミリ秒単位）を表す整数、またはオブジェクト

options：

プロパティ説明と値
delay 任意。アニメーションの開始を遅らせるミリ秒を表す数値。初期値は 0 です。
direction 任意。アニメーションが実行され方を表す文字列。
normal 順方向（初期値）。
reverse 逆方向。
alternate 反復動作
alternate-reverse 逆方向の反復動作。
duration 任意。アニメーションの各反復が完了するまでに掛かるミリ秒を表す数値。初期値は 0。

これは技術的にはオプションですが、この値が 0 の場合、アニメーションは実行されないことに注意してください。

easing 任意。時間の経過に伴うアニメーションの変化率を表す文字列。

以下は定義済みの値： →CSS：animation-timing-function

linear 時間進捗値と出力進捗値が同じ（直線的）。初期値。
ease
ease-in
ease-out
ease-in-out
cubic-bezier(x1, y1, x2, y2) 3 次ベジェ easing 関数を指定する。
endDelay 任意。アニメーションの終了後に遅延するミリ秒を表す数値。初期値は 0。

これは主に、別のアニメーションの終了時間に基づいてアニメーションをシーケンスする場合に使用します。

fill 任意。アニメーションの効果の要素への反映の仕方を文字列で指定します。→CSS：animation-fill-mode
backwards 再生前に要素に反映させる。delay の間にも反映されます。
forwards 再生が完了した後も保持される。
both forwards、backwards 両効果とも適用される。
none アニメーション実行には適用されるが、実行されていない間の効果はない。初期値。
iterationStart 任意。反復のどの時点でアニメーションを開始するかを表す（小数点可能）数値。初期値は 0.0。

例えば 0.3 では、1 つの反復の時間軸の 0.3 から開始され、最後（1.0）まで行き、また最初（0.0）に移り 0.3 で終わります。つまり、0.3～1.0→0.0～0.3。

iterations 任意。アニメーションを繰り返す回数を表す数値。初期値 1。Infinity：要素が存在する限り繰り返す。
composite 任意。このアニメーションと他のアニメーションの間で値を組み合わせる方法を決定します。独自の合成操作を指定しない個別のアニメーションとで。初期値は replace。
add 相加効果をさせる。連続する各反復は最後に構築されます。

たとえば、transform では、translateX(-200px) は、以前の rotate(20deg) 値を上書きしませんが、translateX(-200px) は、rotate(20deg) になります。

accumulate blur(2) と blur(5) は blur(7) になり、「blur(2) blur(5)」ではありません。
replace 以前の値を新しい値で上書きします。
iterationComposite 任意。このアニメーションで反復から反復へと値がどのように構築されるかを決定します。「accumulate」または「replace」に設定できます（composite を参照）。初期値は replace。

キーフレームの複製：

new KeyframeEffect(sourceKeyFrames)
sourceKeyFrames 複製する KeyframeEffect オブジェクト。
例
簡単なアニメーション

HTML： 

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

JavaScript： 

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

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

→new Animation()、play()。

状態を蓄積する

HTML： 

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

JavaScript： 

KF=new KeyframeEffect(  //キーフレーム効果：
  IdTest,  //ターゲット
  [
    {offset:0, transform:'rotateZ(0)translateX(0)'}
   ,{offset:1, transform:'rotateZ(360deg)translateX(100px)'}  //回転＋移動。
  ], 
  {duration:3000, fill:'forwards', composite:'accumulate'}  //掛ける時間、プロパティ設定、プロパティ蓄積。
);
Ani=new Animation(KF);

更に以下のを実行して再生させる。 

Ani.commitStyles();
Ani.play();

→CSS：rotateZ()。

テスト