animationiteration イベント

DOM イベント AnimationEvent

定義と使用方法

animationiteration イベントは、CSS アニメーションが繰り返し再生される際に発生します。

もし CSS animation-iteration-count 属性「1」に設定すると、アニメーションは一度だけ再生され、animationiteration イベントが発生しません。animationiteration イベントをトリガーするには、アニメーションが複数回実行される必要があります。

CSS アニメーションの詳細について学びたい場合は、私たちの CSS3 アニメーション教程。

CSS アニメーションが再生中に、3つのイベントが発生する可能性があります：

  • animationstart - CSS アニメーションが開始されたときに発生
  • animationiteration - CSS アニメーションが繰り返されたときに発生
  • animationend - CSS アニメーションが完了したときに発生

例

CSS アニメーションが繰り返されるとき、<div>要素に対して何かを行います：

var x = document.getElementById("myDIV");
// Chrome、SafariおよびOpera用のコード
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// 標準文法
x.addEventListener("animationiteration", myRepeatFunction);

実際に試してみてください

文法

object.addEventListener("webkitAnimationIteration", myScript);  // Chrome、SafariおよびOpera用のコード
object.addEventListener("animationiteration", myScript);        // 標準文法

注釈：Internet Explorer 8以前のバージョンではサポートされていません addEventListener() メソッド。

技術的詳細

バブル： サポート
キャンセル可能： サポートしていない
イベントタイプ： AnimationEvent
DOM バージョン： レベル3イベント

ブラウザのサポート

表の数字は、そのイベントを完全にサポートする最初のブラウザバージョンを示しています。

数字の後の"webkit"や"moz"は、プレフィックスを使用する最初のバージョンを示しています。

イベント Chrome IE Firefox Safari Opera
animationiteration 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

注釈：Chrome、Safari、Operaの場合はwebkitAnimationEndを使用してください。

関連ページ

CSS チュートリアル：CSS3 アニメーション

CSS リファレンスマニュアル：CSS3 animation 属性

CSS リファレンスマニュアル：CSS3 animation-iteration-count 属性

HTML DOM リファレンスマニュアル：Style animation 属性

DOM イベント AnimationEvent