Window: animationstart イベント
animationstart イベントは、 CSS アニメーションが開始したときに発生します。 animation-delay がある場合、このイベントは待ち時間が経過したときに一度発生します。待ち時間が負の数の場合、イベントは elapsedTime が待ち時間の絶対値と等しくなったときに発生します (および、関連して、アニメーションはシーケンスの中でそのタイムインデックスに再生が始まります)。
| バブリング | あり |
|---|---|
| キャンセル | 不可 |
| インターフェイス | AnimationEvent |
| イベントハンドラープロパティ | onanimationstart (en-US) |
このイベントの本来の対象は、トランジションが適用された Element です。このイベントを Window インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 HTMLElement: animationstart イベントを参照してください。
例
このコードは animationstart イベントを待ち受けし、イベント発生時にメッセージを記録します。
window.addEventListener('animationstart', () => {
console.log('Animation started');
});
同様に、 onanimationstart を使用するとこうなります。
window.onanimationstart = () => {
console.log('Animation started');
};
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Animations Level 1 | 草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS アニメーション
- CSS アニメーションの使用
AnimationEvent- 関連イベント:
animationend,animationiteration,animationcancel Documentを対象としたこのイベント:animationstartHTMLElementを対象としたこのイベント:animationstart