[Edge]。→、、
ウインドウ内で CSS アニメーションが開始したときに発生します。
animation-delay がある場合、このイベントは待ち時間が経過したときに一度発生します。待ち時間が負の数の場合、イベントは elapsedTime が待ち時間の絶対値と等しくなったときに発生します（および、関連して、アニメーションはシーケンスの中でそのタイム インデックスに再生が始まります）。
| バブリング | あり |
|---|---|
| キャンセル可能 | いいえ |
| インターフェイス | AnimationEvent |
| イベント ハンドラー プロパティ | onanimationstart |
→HTMLElement：animationstart イベント。
以下の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="";
setTimeout("IdAni.style.animation='5s linear 1s TestKF'", 100);