このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.
havin' a coffee break

このページは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>

イベントの発生回数:0

*マウスをホバーするとアニメーションをリセットできます。
(C) 2015 havin' a coffee break