例
で何かをする<div> CSSアニメーションが終了したときの要素：
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
//
Standard syntax
x.addEventListener("animationend", myEndFunction); »それを自分で試してみてください 定義と使用法
CSSアニメーションが完了したときにanimationendイベントが発生します。
CSSアニメーションの詳細については、上のチュートリアルを参照CSS3アニメーションを 。
CSSアニメーションを再生するとき、発生する可能性があります3つのイベントがあります。
- animationstart - CSSアニメーションが開始されたときに発生します
- animationiteration - CSSアニメーションが繰り返されたときに発生します
- animationend - CSSアニメーションが完了したときに発生します
ブラウザのサポート
表中の数字は完全にイベントをサポートする最初のブラウザのバージョンを指定します。
続く数字"webkit"または"moz"接頭辞で働いていた最初のバージョンを指定します。
| イベント | |||||
|---|---|---|---|---|---|
| animationend | 4.0のWebKit | 10.0 | 16.0 5.0 MOZ | 4.0のWebKit | 15.0のWebKit 12.1 |
注意：クロム、SafariやOperaのために、webkitAnimationEnd接頭辞を使用しています。
構文
object.addEventListener("webkitAnimationEnd", myScript );
// Code for Chrome, Safari and Opera
object .addEventListener("animationend", myScript );
// Standard syntax
注： addEventListener()メソッドは、Internet Explorer 8およびそれ以前のバージョンでサポートされていません。
技術的な詳細
| バブル： | はい |
|---|---|
| 取消し可能： | ノー |
| イベントの種類： | AnimationEvent |
| DOMバージョン： | レベル3のイベント |
関連ページ
CSSチュートリアル： CSS3アニメーション
CSSリファレンス： CSS3 animation Property
HTML DOMリファレンス： Style animation Property
<イベントオブジェクト