このページはHTMLタグ辞書の“onanimationstart”イベントハンドラの使い方について解説するためのサンプルページです。
var count = 0;
function counter(){
count++;
document.getElementById("counterNumber").innerHTML = count;
};
@keyframes SampleAnime {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
.box {
animation-name: SampleAnime;
animation-duration: 5s;
animation-iteration-count: 5;
}
<div class="box" onanimationstart="counter();">♪</div>
<p>イベントの発生回数：<output id="counterNumber">0</output>回</p>
♪
イベントの発生回数：回
＊マウスをホバーするとアニメーションをリセットできます。