CSS3アニメーションのイベントを取得する

アニメーション開始

var selector = document.querySelector("#example");
selector.addEventListener("animationstart",function(e){
    // animation start
});

アニメーション中

var selector = document.querySelector("#example");
selector.addEventListener("animationiteration",function(e){
    // animation iteration (step)
});

アニメーション終了

var selector = document.querySelector("#example");
selector.addEventListener("animationend",function(e){
    // animation end
});

トランジション開始

var selector = document.querySelector("#example");
selector.addEventListener("transitionstart",function(e){
    // transition start
});

トランジション中(ない？？これが一番欲しい)

// var selector = document.querySelector("#example");
// selector.addEventListener("transitioniteration",function(e)// {
//     // transition iteration (step)
// });

トランジション終了

var selector = document.querySelector("#example");
selector.addEventListener("transitionend",function(e){
    // transition end
});

参考

注意

webkitとかベンダープリフィックスが必要みたい
イベント名が違うので注意