CSS3 Animation monitoring and pausing

Add an animation class for an element you're still using settimeout to delay the next move, and you're out. The following are definitely the knowledge points for forcing.

1.animation Animation Monitoring

-webkit-animation animations actually have three events:
Start Event Webkitanimationstart
End Event Webkitanimationend
Repeating motion event Webkitanimationiteration

Dom.addeventlistener ("Webkitanimationstart", function () {////Animation Start Event     Console.log ("Start");}, False); Dom.addeventlistener ("Webkitanimationend", function () {////animation at the end     of event Console.log ("End");}, False); Dom.addeventlistener ("Webkitanimationiteration", function () {//] event    Console.log ("End") when the animation repeats motion;//First time animation finishes output end} , false);

2.transition Animation Monitoring

This animation only webkittransitionend this one event

Dom.addeventlistener ("Webkittransitionend", function () {    console.log ("End");}, False);

PS above does not do the compatible processing

So that we can use a few settimeout to do coherent animation, but the same element of multiple animation effects may need to be nested, think if the same element why not directly in a animation to complete it, this may be specific case specific analysis

3.animation Animation stop

When you set the animation to infinity, what is the way to stop it in the current screen?

<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 (0.8s) infinite both;} Animation of the picture background. 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= " Pause "></p><script type=" Text/javascript "> var image = document.getElementById (" testimg "), Button = doc        Ument.getelementbyid ("testbtn"); if (image.classlist && image && button) {Button.onclick = function () {if (This.value =                = ' pause ') {image.classList.add (' Stop ');            This.value = ' play ';                } else {image.classList.remove (' Stop '); This.valUE = ' pause ';    }        }; } </script>

