アニメーション反復イベント
例
CSSアニメーションが繰り返されるときに、<div>要素を使用して何かを実行します。
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);
定義と使用法
アニメーション反復イベントは、CSSアニメーションが繰り返されるときに発生します。
CSSのanimation-iteration-countプロパティが「1」に設定されている場合、つまりアニメーションは1回だけ再生されるため、animationiterationイベントは発生しません。このイベントを発生させるには、アニメーションを複数回実行する必要があります。
CSSアニメーションの詳細については、 CSS3アニメーションに関するチュートリアルを参照してください。
CSSアニメーションが再生されると、発生する可能性のある3つのイベントがあります。
- Animationstart -CSSアニメーションが開始したときに発生します
- Animationiteration-CSSアニメーションが繰り返されるときに発生します
- Animationend -CSSアニメーションが完了したときに発生します
ブラウザのサポート
表の数字は、イベントを完全にサポートする最初のブラウザーバージョンを示しています。
「webkit」または「moz」が後に続く数字は、プレフィックスで機能した最初のバージョンを指定します。
Event | |||||
---|---|---|---|---|---|
animationiteration | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
注: Chrome、Safari、Operaの場合は、webkitAnimationIterationプレフィックスを使用してください。
構文
object.addEventListener("webkitAnimationIteration", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationiteration", myScript); // Standard syntax
注: addEventListener ()メソッドは、Internet Explorer8以前のバージョンではサポートされていません。
技術的な詳細
泡: | はい |
---|---|
キャンセル可能: | 番号 |
イベントタイプ: | AnimationEvent |
DOMバージョン: | レベル3のイベント |
関連ページ
CSSチュートリアル:CSS3アニメーション
CSSリファレンス:CSS3アニメーションプロパティ
CSSリファレンス:CSS3animation-iteration-countプロパティ
HTML DOMリファレンス:スタイルアニメーションプロパティ