CSS3 애니메이션 모니터링 및 일시정지

요소에 애니메이션 클래스를 추가한 후에도 다음 작업을 지연시키기 위해 여전히 settimeout을 사용하고 있습니다. 다음은 확실히 허술한 지식입니다.

1.애니메이션 애니메이션 모니터링

-webkit-animation animation에는 실제로 세 가지 이벤트가 있습니다.
시작 이벤트 webkitAnimationStart
끝 이벤트 webkitAnimationEnd
반복 모션 이벤트 webkitAnimationIteration

dom.addEventListener("webkitAnimationStart", function(){ //动画开始时事件 
    console.log("start"); 
}, false); 
dom.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件 
    console.log("end"); 
}, false); 
dom.addEventListener("webkitAnimationIteration", function(){ //动画重复运动时的事件
    console.log("end"); //第一遍动画完成输出end
}, false);

2. 전환 애니메이션 모니터링

이 애니메이션에는 webkitTransitionEnd라는 하나의 이벤트만 있습니다

dom.addEventListener("webkitTransitionEnd", function(){
    console.log("end");
}, false);

ps 위의 어느 것도 호환 처리를 수행하지 않았습니다

그래서 우리는 일관된 애니메이션 효과를 만드는 데 settimeout이 거의 사용되지 않지만 동일한 요소의 여러 애니메이션 효과를 중첩해야 할 수도 있습니다. 왜 동일한 요소를 하나의 애니메이션에서 직접 완성할 수 없는지 생각해 보았습니다. 상황을 자세히 분석합니다

3. 애니메이션 애니메이션 정지

애니메이션을 무한으로 설정했을 때 현재 사진에서 정지하는 방법

<style type="text/css">
.love {
    display: block;
    width: 100px; height: 100px;
    background: url(http://www.zhangxinxu.com/study/201512/web_heart_animation.png) 0 0 no-repeat;
    background-size: 2900%;
    animation: heart-burst steps(28) 0.8s infinite both;
}//图片背景的动画    
.stop {
    animation-play-state: paused;
}
@keyframes heart-burst {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
</style>

<i id="testImg" class="love"></i>
<p><input type="button" id="testBtn" value="暂停"></p>

<script type="text/javascript">
    var image = document.getElementById("testImg"), 
    button = document.getElementById("testBtn");
    
    if (image.classList && image && button) {
        button.onclick = function() {
            if (this.value == &#39;暂停&#39;) {
                image.classList.add(&#39;stop&#39;);
                this.value = &#39;播放&#39;;
            } else {
                image.classList.remove(&#39;stop&#39;);
                this.value = &#39;暂停&#39;;
            }
        };
    }    
</script>