このページはHTMLタグ辞書の“onanimationcancel”イベントハンドラの使い方について解説するためのサンプルページです。
var count = 0;
document.getElementById("sampleElement").onanimationcancel = function() {
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 id="sampleElement">♪</div>
<p>イベントの発生回数：<output id="counterNumber">0</output></p>
♪
イベントの発生回数：回
＊マウスをホバーするとアニメーションをリセットできます。