“onanimationiteration”イベントハンドラ

“onanimationiteration”イベントハンドラ

“onanimationiteration”イベントハンドラはCSSの“animation”プロパティなどによるアニメーションの1回の周期が終了した時に発生する“animationiteration”イベントを処理するためのイベントハンドラです。

“animationiteration”イベントはアニメーションが終了した時に発生する“animationend”イベントと同時には発生しません。なのでアニメーションが繰り返されない場合には“animationiteration”イベントは一度も発生しません。

“onanimationiteration”イベントハンドラはすべてのHTMLの要素でコンテント属性とIDL属性として使用できます。また、すべての“Document”オブジェクトと“Window”オブジェクトでIDL属性として使用できます。

別名として“webkit”の接頭辞がある“onwebkitanimationiteration”が使用でき、“HTML Living Standard”の仕様書にはこの名前で記載されています。

サンプルコード

IDL属性

var count = 0;
document.getElementById("sampleElement").onanimationiteration = function() {

count++;
document.getElementById("counterNumber").innerHTML = count;

};

表示サンプルはリンク先を参照

コンテント属性

<div onanimationiteration="counter();">♪</div>

<p>イベントの発生回数：<output id="counterNumber">0</output>回</p>


表示サンプルはリンク先を参照

仕様書