“onanimationend”イベントハンドラ

“onanimationend”イベントハンドラ

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

“animationend”イベントはアニメーションが最後まで再生された時に発生します。アニメーションが繰り返される場合には一番最後に発生します。

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

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

サンプルコード

IDL属性

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

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

};

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

コンテント属性

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

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


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

仕様書