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

Question

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

Answer 1

在js中监听结束事件，如果要想监听第一遍执行完成可以设置一个变量标识来判断
例子

<style>
#test{width:100px; height:100px; background:#999;}
.scale{animation:scale 8s linear 0s infinite;}
@keyframes scale{
     0%,100% {transform:scale(1.0)}
     50% {transform:scale(1.2)}
     20%,80% {transform:scale(1.1)}
}
</style>
<div id="test" class="scale"></div>

<script>
    var isFirst = true;
    var test = document.getElementById('test');
    //动画开始
    test.addEventListener("webkitAnimationStart", function(){
        console.log('动画开始'); 
    }, false); 
    //监听动画循环
    //第一遍动作完成时
    test.addEventListener("webkitAnimationIteration", function(){
        if(isFirst){
            console.log('一遍完成');
            isFirst = false;
        }
    }, false); 
</script>

Answer 2

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