animationiterationイベント
インスタンス
CSS アニメーションが再再生されるときに <div> 要素にリスナーイベントを追加:
var x = document.getElementById("myDIV");
// Chrome, Safari と Opera コード
x.addEventListener("webkitAnimationIteration", myStartFunction);
// 標準構文
x.addEventListener("animationiteration", myStartFunction);
// Chrome, Safari と Opera コード
x.addEventListener("webkitAnimationIteration", myStartFunction);
// 標準構文
x.addEventListener("animationiteration", myStartFunction);
試してみる »
定義と使い方
animationiteration イベントは、CSS アニメーションが再再生されたときに発生します。
もし CSSanimation-iteration-countプロパティが "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 |
注意：Chrome、Safari、Opera ブラウザは webkitAnimationEnd プレフィックスを使用します。
構文
object.addEventListener("webkitAnimationIteration", myScript);
// Chrome, Safari と Opera コード
object.addEventListener("animationiteration", myScript); // 標準構文
object.addEventListener("animationiteration", myScript); // 標準構文
注意：Internet Explorer 8 以前の IE バージョンではサポートされていませんaddEventListener()メソッド。
技術詳細
| バブリングをサポートするかどうか: | Yes |
|---|---|
| キャンセルできるかどうか: | No |
| イベントタイプ: | AnimationEvent |
関連ページ
CSS チュートリアル:CSS3 アニメーション
CSS リファレンス:CSS3 アニメーションプロパティ
CSS リファレンス:CSS3 animation-iteration-count プロパティ
HTML DOM リファレンス:Style アニメーションプロパティ
イベントオブジェクト その他の拡張