[Edge]。→、、
ウインドウ内で CSS アニメーションが完了したときに発生します。
アニメーションが完了前に中止された場合、例えば要素が DOM から削除されたりアニメーションが要素から削除されたりした場合、animationend イベントは発生しません。
| バブリング | ¶あり |
|---|---|
| キャンセル可能 | ¶はい |
| インターフェイス | ¶AnimationEvent |
| イベント ハンドラー プロパティ | onanimationend |
→HTMLElement：animationend イベント。
以下のCSSが組み込んであります：
HTML：
<DIV id=IdAni style="width:1em">■</DIV> <SPAN id=IdLog></SPAN>
JavaScript：
function JobS(eve){ //animationstart イベントの処理：
D=eve; //＝[object]：[object AnimationEvent]
詳細
//isTrusted＝[boolean]：true
//animationName＝[string]：TestKF
//elapsedTime＝[number]：0
//pseudoElement＝[string]：
//type＝[string]：animationstart
//target＝[object]：[object HTMLDivElement]
//currentTarget＝[object]：null
//eventPhase＝[number]：0
//bubbles＝[boolean]：true
//cancelable＝[boolean]：true
//defaultPrevented＝[boolean]：false
//composed＝[boolean]：false
//…
IdLog.innerHTML=IdLog.innerHTML+"開始 ";
}
function JobE(eve){ //animationend イベントの処理：
DA=eve; //＝[object]：[object AnimationEvent]
詳細
//isTrusted＝[boolean]：true
//animationName＝[string]：TestKF
//elapsedTime＝[number]：5
//pseudoElement＝[string]：
//type＝[string]：animationend
//target＝[object]：[object HTMLDivElement]
//currentTarget＝[object]：null
//eventPhase＝[number]：0
//bubbles＝[boolean]：true
//cancelable＝[boolean]：true
//defaultPrevented＝[boolean]：false
//composed＝[boolean]：false
//…
IdLog.innerHTML=IdLog.innerHTML+"終了 ";
}
window.onanimationstart=JobS; //イベント割り当て。
window.onanimationend=JobE; //イベント割り当て。
IdAni.style.animation="5s linear 1s TestKF"; //アニメーション割り当て。1秒後に5秒掛けて、直線時間的にアニメーションをする。
JavaScript： 再度アニメーション停止。
IdAni.style.animation="";