[JavaScript] CSSアニメーションの開始・終了イベント

最近iPad向けにcssアニメーションを頻繁に使う仕事をやった。
-webkit-transitionじゃなくて-webkit-keyframesで動かすタイプ。
アニメーションを開始するタイミング、終了するタイミング、ループするタイミングでイベントを登録できることを知ったのでメモ。便利。

//アニメーション開始時
//delayを指定していた場合は、遅れて開始するタイミングで発生するらしい
elem.addEventListener('webkitAnimationStart', function(){
 //開始時の処理
});
//jQueryなら
$(elem).bind('webkitAnimationStart', function(){
 //開始時の処理
});


//終了時
elem.addEventListener('webkitAnimationEnd', function(){
 //終了時の処理
});

//ループ時。animation-iteration-countが1より大きい時に発生する
elem.addEventListener('webkitAnimationIteration', function(){
 //ループ時の処理
});

今回はiPad向けだったので、webkitのみを対象にしたけど、FireFoxだとanimationstart, animationendとプレフィックスなしの全部小文字になるらしいので注意。

参考
CSS アニメーションの基礎