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