“onanimationstart”イベントハンドラ

“onanimationstart”イベントハンドラ

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

“animation-delay”プロパティによる遅延時間がある場合は“animationstart”イベントは遅延時間が終了した時に発生します。

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

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

サンプルコード

IDL属性

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

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

};

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

コンテント属性

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

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


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

仕様書