DOM

：

：

Animation.cancel() メソッド

　編集：2022.10.22 by T.A.

[Edge]。→、、

Web アニメーション Animation を中断させます。startTime と currentTime は null となります。

mdn： …によって引き起こされたすべての KeyframeEffect を初期化し、再生を中止します。

mdn： メモ： アニメ―ションをキャンセルした時、startTime と currentTime は、null に設定されます。

構文
Animation.cancel()
Animation Animation
戻り値

なし（undefined）。

例外

このメソッドは、直接は例外を発生しません。しかし、キャンセル時にアニメーションの playState が "idle" 以外の場合、current finished promise は DOMException の AbortError で拒否されます。

例
アニメーションの再生と終了、中止

HTML： 

<DIV id=IdTest style="width:1em">■</DIV>
<BUTTON id=IdPlay>再生</BUTTON>
<BUTTON id=IdStop>終了</BUTTON>
<BUTTON id=IdCancel>中止</BUTTON>
<BR>
<SPAN id=IdLog></SPAN>

JavaScript： 

KE=new KeyframeEffect(  //アニメーション データの作成：
  IdTest, [  //ターゲット。
    {transform:'translateX(0)'}
    , {transform:'translateX(500px)'}  //X軸移動。
  ]
  , {duration:10000, fill:'forwards'}  //10秒掛けて、？。
);
Ani=new Animation(KE, document.timeline);  //アニメーション作成。

function JobPlay(){  //「再生」ボタンが押された時の処理：
  Ani.play();        //アニメーション再生。
}
function JobStop(){ //「終了」ボタンが押された時の処理：
  Ani.finish();       //アニメーション終了。
}
function JobCancel(){ //「中止」ボタンが押された時の処理：
  Ani.cancel();       //アニメーション中止。
}
IdPlay.onclick=JobPlay;   //ボタンにイベント割り当て。
IdStop.onclick=JobStop;   //ボタンにイベント割り当て。
IdCancel.onclick=JobCancel; //ボタンにイベント割り当て。

function Job(){  //タイマー監視の処理：
  IdLog.innerHTML="Ani.playState："+Ani.playState;  //表示。
}
setInterval(Job, 300);  //0.3秒毎のタイマー監視割り当て。

アニメーションをキャンセルさせた。playState が「idle」になった。

そして得られた Ani： 

//Ani＝[object]：[object Animation]

詳細//effect＝[object]：[object KeyframeEffect]
//startTime＝[object]：null
//currentTime＝[object]：null
//playbackRate＝[number]：1
//playState＝[string]：idle
//pending＝[boolean]：false
//id＝[string]：
//…

Ani.effect 

＝[object]：[object KeyframeEffect]
target＝[object]：[object HTMLDivElement]
pseudoElement＝[object]：null
composite＝[string]：replace
getKeyframes＝[function]：function getKeyframes() { [native code] }
…

Ani.effect.getKeyframes() 

＝[object]：[object Object],[object Object]
0＝[object]：[object Object]
1＝[object]：[object Object]

Ani.effect.getKeyframes()[0] 

＝[object]：[object Object]
offset＝[object]：null
easing＝[string]：linear
composite＝[string]：auto
transform＝[string]：translateX(0px)
computedOffset＝[number]：0

Ani.effect.getKeyframes()[1] 

＝[object]：[object Object]
offset＝[object]：null
easing＝[string]：linear
composite＝[string]：auto
transform＝[string]：translateX(500px)
computedOffset＝[number]：1

KeyframeEffect は初期化されていないようですが。

→addEventListener()。

→animate()。commitStyles()。remove イベント。replaceState。

→CSS：transform。CSS：translate。

テスト