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