随身笔记
随身笔记

css animation的监听事件

在css3中有animation属性,如果我们需要在animation的动画过程中执行一些JS或者是监听animation,JS中有提供相应的事件

 

x.addEventListener("animationend", myStartFunction);  //标准写发


addEventListener("webkitAnimationEnd", function(){ //针对webkit内核
   //回调代码
}, false);


不同浏览器的AnimationEnd写法 (webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)


开始事件 webkitAnimationStart 
结束事件 webkitAnimationEnd 
重复运动事件 webkitAnimationIteration 



-webkit-animation-iteration-count:infinite //动画无限播放时
监听webkitAnimationIteration事件就会无线次触发


-webkit-animation-iteration-count:1   //webkitAnimationIteration事件不会触发
-webkit-animation-iteration-count:2 //webkitAnimationIteration事件触发1次
-webkit-animation-iteration-count:3 //webkitAnimationIteration事件触发2次

 

 

 

 

随身笔记

css animation的监听事件
在css3中有animation属性,如果我们需要在animation的动画过程中执行一些JS或者是监听animation,JS中有提供相应的事件   x.addEventListener("animationend", myStartFunction)…
扫描二维码继续阅读
2016-03-28