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

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

view plainprint?

1. //アニメーション開始時  
2. //delayを指定していた場合は、遅れて開始するタイミングで発生するらしい  
3. elem.addEventListener('webkitAnimationStart', function(){  
4.  //開始時の処理  
5. });  
6. //jQueryなら  
7. $(elem).bind('webkitAnimationStart', function(){  
8.  //開始時の処理  
9. });  
10.   
11.   
12. //終了時  
13. elem.addEventListener('webkitAnimationEnd', function(){  
14.  //終了時の処理  
15. });  
16.   
17. //ループ時。animation-iteration-countが1より大きい時に発生する  
18. elem.addEventListener('webkitAnimationIteration', function(){  
19.  //ループ時の処理  
20. });  

//アニメーション開始時
//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 アニメーションの基礎