js 监听css3动画的执行,animation动画暂停

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;//暂停动画
    }
}