AnimationEvent

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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-name CSS プロパティの値を含みます。
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 の定義	草案	初回定義

ブラウザーの対応

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`AnimationEvent` 実験的	Chrome 完全対応 43 完全対応 43 未対応 1 — 70 接頭辞付き接頭辞付き WebKit のベンダー接頭辞が必要	Edge 完全対応 12	Firefox 完全対応 6	IE 完全対応 10	Opera 完全対応 30 完全対応 30 未対応 15 — 57 接頭辞付き接頭辞付き WebKit のベンダー接頭辞が必要未対応 12.1 — 15 完全対応 12 接頭辞付き接頭辞付き o のベンダー接頭辞が必要	Safari 完全対応 9.1 完全対応 9.1 完全対応 4 接頭辞付き接頭辞付き WebKit のベンダー接頭辞が必要	WebView Android 完全対応 43 完全対応 43 未対応 1 — 70 接頭辞付き接頭辞付き WebKit のベンダー接頭辞が必要	Chrome Android 完全対応 43 完全対応 43 未対応 18 — 70 接頭辞付き接頭辞付き WebKit のベンダー接頭辞が必要	Firefox Android 完全対応 6	Opera Android 完全対応 30 完全対応 30 未対応 14 — 49 接頭辞付き接頭辞付き WebKit のベンダー接頭辞が必要未対応 12.1 — 14 完全対応 12 接頭辞付き接頭辞付き o のベンダー接頭辞が必要	Safari iOS 完全対応 9.3 完全対応 9.3 完全対応 3.2 接頭辞付き接頭辞付き WebKit のベンダー接頭辞が必要	Samsung Internet Android 完全対応 4.0 完全対応 4.0 未対応 1.0 — 10.0 接頭辞付き接頭辞付き WebKit のベンダー接頭辞が必要
`AnimationEvent()` constructor 実験的	Chrome 完全対応 43	Edge 完全対応 14	Firefox 完全対応 23	IE 未対応なし	Opera 未対応なし	Safari 未対応なし	WebView Android 完全対応 43	Chrome Android 完全対応 43	Firefox Android 完全対応 23	Opera Android 未対応なし	Safari iOS ?	Samsung Internet Android 完全対応 4.0
`animationName` 実験的	Chrome 完全対応 43	Edge 完全対応 12	Firefox 完全対応 6	IE 完全対応 10	Opera 完全対応 30	Safari 完全対応 9	WebView Android 完全対応 43	Chrome Android 完全対応 43	Firefox Android 完全対応 6	Opera Android 完全対応 30	Safari iOS 完全対応 9	Samsung Internet Android 完全対応 4.0
`elapsedTime` 実験的	Chrome 完全対応 43	Edge 完全対応 12	Firefox 完全対応 6	IE 完全対応 10	Opera 完全対応 30	Safari 完全対応 9	WebView Android 完全対応 43	Chrome Android 完全対応 43	Firefox Android 完全対応 6	Opera Android 完全対応 30	Safari iOS 完全対応 9	Samsung Internet Android 完全対応 4.0
`initAnimationEvent` 実験的非推奨非標準	Chrome 未対応 1 — 18 代替名未対応 1 — 18 代替名代替名非標準の名前 `initWebKitAnimationEvent` を使用しています。	Edge 未対応 12 — 16	Firefox 未対応 6 — 23	IE 完全対応 10	Opera 未対応 12.1 — 15	Safari 未対応 4 — 6 代替名未対応 4 — 6 代替名代替名非標準の名前 `initWebKitAnimationEvent` を使用しています。	WebView Android 未対応なし	Chrome Android 未対応なし	Firefox Android 未対応 6 — 23	Opera Android 未対応 12.1 — 14	Safari iOS 未対応 3.2 — 6 代替名未対応 3.2 — 6 代替名代替名非標準の名前 `initWebKitAnimationEvent` を使用しています。	Samsung Internet Android 未対応なし
`pseudoElement` 実験的	Chrome 完全対応 68	Edge 完全対応 79	Firefox 完全対応 23	IE 未対応なし	Opera 未対応なし	Safari 未対応なし	WebView Android 完全対応 68	Chrome Android 完全対応 68	Firefox Android 完全対応 23	Opera Android 未対応なし	Safari iOS 未対応なし	Samsung Internet Android 完全対応 10.0

凡例

完全対応: 完全対応
未対応: 未対応
実装状況不明: 実装状況不明
実験的。動作が変更される可能性があります。: 実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。: 非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。: 非推奨。新しいウェブサイトでは使用しないでください。
非標準の名前を使用しています。: 非標準の名前を使用しています。
使用するには、ベンダー接頭辞または異なる名前が必要です。: 使用するには、ベンダー接頭辞または異なる名前が必要です。

コンストラクター

プロパティ

メソッド

仕様書

ブラウザーの対応

凡例

関連情報

ウェブ開発のベストプラクティスを学ぶ