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
を対象としたこのイベント:animationstart
HTMLElement
を対象としたこのイベント:animationstart