CSS 动画播放时，会发生以下三个事件：
animationstart -CSS 动画开始后触发
animationiteration -CSS 动画重复播放时触发
animationend -CSS 动画完成后触发
@animationstart='animationstart'@animationiteration='animationiteration'@animationend ='animationend'
其他方式：
var css3Am = document.querySelector("#css3Am");function startAni(){console.log("animationstart");}function overAni(){console.log("animationend");}function chongfuAni(){console.log("animationiteration");}function overTran(){console.log("transitionend");}//监听transition动画结束方法css3Am .addEventListener("webkitTransitionEnd", overTran, false);css3Am .addEventListener("mozTransitionEnd", overTran, false);css3Am .addEventListener("MSTransitionEnd", overTran, false);css3Am .addEventListener("otransitionend", overTran, false);css3Am .addEventListener("transitionend", overTran, false);//监听animation动画开始方法css3Am .addEventListener("webkitAnimationStart", startAni, false);css3Am .addEventListener("mozAnimationStart", startAni, false);css3Am .addEventListener("MSAnimationStart", startAni, false);css3Am .addEventListener("oanimationstart", startAni, false);css3Am .addEventListener("animationstart", startAni, false);//监听animation动画结束方法css3Am .addEventListener("webkitAnimationEnd", overAni, false);css3Am .addEventListener("mozAnimationEnd", overAni, false);css3Am .addEventListener("MSAnimationEnd", overAni, false);css3Am .addEventListener("oanimationend", overAni, false);css3Am .addEventListener("animationend", overAni, false);//监听animation重复运动方法css3Am .addEventListener("webkitAnimationIteration", chongfuAni, false);css3Am .addEventListener("mozAnimationIteration", chongfuAni, false);css3Am .addEventListener("MSAnimationIteration", chongfuAni, false);css3Am .addEventListener("oanimationiteration", chongfuAni, false);css3Am .addEventListener("animationiteration", chongfuAni, false);
不同的浏览器要求使用不同的前缀：
No prefix: animationstart, animationiteration, animationend
Webkit: webkitAnimationStart, webkitAnimationIteration, webkitAnimationEnd
Mozilla: mozAnimationStart, mozAnimationIteration, mozAnimationEnd
MS:MSAnimationStart, MSAnimationIteration, MSAnimationEnd
O :oAnimationStart, oAnimationIteration, oAnimationEnd
animation动画暂停:
animation-play-state 属性规定动画正在运行还是暂停。
animation-play-state: paused|running;
paused：规定动画已暂停。
running：规定动画正在播放。
实现放上去暂停动画:
div {width: 100px;height: 100px;background-color: red;margin: 50px auto;animation: mymove 1s linear infinite;&:hover{animation-play-state:paused;//暂停动画}}
