如果设置css3动画为循环播放，js怎么判断动画第一次播放结束呢？

Question

如果设置css3动画为循环播放，js怎么判断动画第一次播放结束呢？

Answer 1

你可以只写一次动画,用js来实现循环,这样就可以判断了

Answer 2

在js中监听结束事件，如果要想监听第一遍执行完成可以设置一个变量标识来判断例子<style>#test{width:100px; height:100px; background:#999;}.scale{animation:scale 8s linear 0s infinite;}@keyframes scale{&nbsp; &nbsp; &nbsp;0%,100% {transform:scale(1.0)}&nbsp; &nbsp; &nbsp;50% {transform:scale(1.2)}&nbsp; &nbsp; &nbsp;20%,80% {transform:scale(1.1)}}</style><div id="test" class="scale"></div><script>&nbsp; &nbsp; var isFirst = true;&nbsp; &nbsp; var test = document.getElementById('test');&nbsp; &nbsp; //动画开始&nbsp; &nbsp; test.addEventListener("webkitAnimationStart", function(){&nbsp; &nbsp; &nbsp; &nbsp; console.log('动画开始');&nbsp;&nbsp; &nbsp; }, false);&nbsp;&nbsp; &nbsp; //监听动画循环&nbsp; &nbsp; //第一遍动作完成时&nbsp; &nbsp; test.addEventListener("webkitAnimationIteration", function(){&nbsp; &nbsp; &nbsp; &nbsp; if(isFirst){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('一遍完成');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isFirst = false;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, false);&nbsp;</script>