Share a listener CSS3 animation (animation) End Event instance

when CSS3 's animation finishes an animation, we want to keep the animation in the terminating state or some other event, how do we do it?

We can listen to the Webkitanimationend event,

Event O.addeventlistener at end of animation ("Webkitanimationend", function () {    console.log ("End of Animation");})

-webkit-animation animations have three events:

Start Event: Webkitanimationstart
End Event: Webkitanimationend
Repeat motion event: webkitanimationiteration

Event O.addeventlistener at start of animation ("Webkitanimationstart", function () {    console.log ("animation Start");}) Animation repeats motion when event O.addeventlistener ("Webkitanimationiteration", function () {    console.log ("Animation repeats Motion");}) Event O.addeventlistener at end of animation ("Webkitanimationend", function () {    console.log ("End of Animation");})

Example:

<! DOCTYPE html>
CSS3 the Transition property transition, at the end of the animation, there is also an end event: webkittransitionend

Note: Transition only has this one event

"Recommended"

1. Detailed description of the Animation-direction attribute in CSS3

2.8 large properties of the CSS3 animation (Animation) that must be mastered

3. Using the animation attribute to implement the time-lapse execution Example tutorial

4. Explain the two types of suspension in CSS3 (transition, animation)