AnimationEvent インターフェイスは、アニメーションに関する情報を提供するイベントを表します。
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/AnimationEvent" target="_top"><rect x="116" y="1" width="140" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">AnimationEvent</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
コンストラクター
AnimationEvent()- 指定された引数で
AnimationEventイベントを生成します。
プロパティ
親の Event から継承されるプロパティもあります。
AnimationEvent.animationName読取専用DOMStringで、この変化に関連付けられたanimation-nameCSS プロパティの値を含みます。AnimationEvent.elapsedTime読取専用float値で、アニメーションが実行された時間の長さを秒単位で表し、イベントが発生したときは、アニメーションが停止していた時間は除外されます。animationstartイベントでは、elapsedTimeは、ふつう0.0となりますが、animation-delayが負の値であった場合は例外で、この場合はイベントはelapsedTimeに(-1 * delay)が入った状態でイベントが発生します。AnimationEvent.pseudoElement読取専用DOMStringで、'::'で始まり、アニメーションが実行される 疑似要素 の名前が入ります。このアニメーションが疑似要素ではなく要素で実行されている場合は、空文字列''になります。
メソッド
親の Event から継承されるメソッドもあります。
AnimationEvent.initAnimationEvent()- 非推奨の
Document.createEvent("AnimationEvent")メソッドを使用して作成されたAnimationEventを初期化します。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Animations AnimationEvent の定義 |
草案 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
AnimationEvent | Chrome
完全対応
43
| Edge 完全対応 あり | Firefox 完全対応 6 | IE 完全対応 10 | Opera
完全対応
30
| Safari
完全対応
9.1
| WebView Android
完全対応
あり
| Chrome Android
完全対応
43
| Edge Mobile ? | Firefox Android 完全対応 6 | Opera Android
完全対応
30
| Safari iOS
?
| Samsung Internet Android
完全対応
4.0
|
AnimationEvent | Chrome
完全対応
43
| Edge ? | Firefox 完全対応 23 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android
完全対応
43
| Chrome Android
完全対応
43
| Edge Mobile ? | Firefox Android 完全対応 23 | Opera Android 未対応 なし | Safari iOS ? | Samsung Internet Android 完全対応 4.0 |
animationName | Chrome
完全対応
43
| Edge 完全対応 12 | Firefox 完全対応 6 | IE 完全対応 10 | Opera 完全対応 あり | Safari 完全対応 9 | WebView Android
完全対応
43
| Chrome Android
完全対応
43
| Edge Mobile 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 4.0 |
elapsedTime | Chrome 完全対応 43 | Edge 完全対応 12 | Firefox 完全対応 6 | IE 完全対応 10 | Opera 完全対応 あり | Safari 完全対応 9 | WebView Android 完全対応 あり | Chrome Android 完全対応 43 | Edge Mobile 完全対応 あり | Firefox Android 完全対応 6 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 4.0 |
initAnimationEvent | Chrome
未対応
? — 18
| Edge 未対応 12 — 16 | Firefox 未対応 6 — 23 | IE 完全対応 10 | Opera 未対応 12.1 — 15 | Safari
未対応
? — 6
| WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile ? | Firefox Android 未対応 6 — 23 | Opera Android 未対応 ? — 14 | Safari iOS
未対応
? — 6
| Samsung Internet Android 未対応 なし |
pseudoElement | Chrome 完全対応 68 | Edge 未対応 なし | Firefox 完全対応 23 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 完全対応 68 | Chrome Android 完全対応 68 | Edge Mobile 未対応 なし | Firefox Android 完全対応 23 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非標準の名前を使用しています。
- 非標準の名前を使用しています。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
関連情報
- CSS アニメーションの使用
- アニメーションに関する CSS プロパティと @-規則:
animation,animation-delay,animation-direction,animation-duration,animation-fill-mode,animation-iteration-count,animation-name,animation-play-state,animation-timing-function,@keyframes.