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