animationend イベント
定義と使用方法
CSSアニメーションが完了したときにanimationendイベントが発生します。
CSSアニメーションの詳細について学びたい場合は、私たちの CSS3 アニメーション教程。
CSSアニメーションが再生中に、3つのイベントが発生する可能性があります：
- animationstart - CSSアニメーションが始まったときに発生します
- animationiteration - CSSアニメーションが繰り返されたときに発生します
- animationend - CSSアニメーションが完了したときに発生します
例
CSSアニメーションが終了したときに<div>要素に対して何かを行います：
var x = document.getElementById("myDIV");
// Chrome、Safari、Opera向けの文法
x.addEventListener("webkitAnimationEnd", myEndFunction);
// 標準的な文法
x.addEventListener("animationend", myEndFunction);
文法
object.addEventListener("webkitAnimationEnd", myScript); // Chrome、Safari、Opera向けのコード
object.addEventListener("animationend", myScript); // 標準的な文法
注釈：Internet Explorer 8以前のバージョンではサポートしていません addEventListener()メソッド。
技術的詳細
| バブル： | サポートしています |
|---|---|
| キャンセル可能： | サポートしていません |
| イベントタイプ： | AnimationEvent |
| DOMバージョン： | レベル3イベント |
ブラウザのサポート
表の数字は、そのイベントを完全にサポートする最初のブラウザのバージョンを示しています。
数字の後ろの"webkit"や"moz"は、プレフィックスを使用する最初のバージョンを示しています。
| イベント | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| animationend | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
注釈：Chrome、Safari、OperaのためにwebkitAnimationEndを使用してください。
