AnimationEnd 事件侦听

CSS3 动画结束时是有触发事件的，这个之前竟然不了解。。除了JS动画如果做纯css3动画的时候使用 delay 延时来控制动画先后顺序，或者通过setTimeout来控制，其实完全可以通过侦听 animationEnd 的回调方法来依次控制动画。

tt.addEventListener("webkitAnimationStart", function(){ //动画开始时事件 
console.log(1);//动画开始时，控制台输出1 
}, false); 
tt.addEventListener("webkitTransitionEnd", function(){ //动画开始时事件 
console.log(1);//动画结束时，控制台输出1 
}, false); 
tt.addEventListener("webkitAnimationIteration", function(){ //动画重复运动时的事件 
console.log(3);//第一遍动作完成时，控制台输出3 
}, false); 

当然Jquery 也可以控制

 $('.dom').on("animationend webkitAnimationEnd",function(){
   $('.dom2').addClass('move');
 })

css3的过渡属性transition，在动画结束时，也存在结束的事件：webkitTransitionEnd;
注意：transition,也仅仅有这一个事件。

 $('.dom').on("transitionEnd webkitTransitionEnd",function(){
   $('.dom2').addClass('move');
 })