Webkitanimationend Events and Webkittransitionend events

Transferred from: http://www.html5online.com.cn/articles/2013012201.html#

In CSS 3, you can use the Keyframe style property to implement animation animations with animation style properties and transition animations with transition style properties.

These two events are described in detail in the WebKit engine's browser, which includes both the Chrome browser and the Safari browser, with Webkitanimationend events and Webkittransitionend events related to these two animation features. The animation animation feature in CSS 3 and the Transition animation feature are not described in detail in this article, if you want to learn more about this, you can refer to the author's "HTML 5 and CSS 3 authoritative guide", or click here to register for our business-oriented enterprise ( Can go to the enterprise on-site training) or for individual training courses, in order to ensure that the students really mastered the knowledge, after the training of one year, where the students encountered in the course of the various problems, can be in the "Technical Forum" column in the site after the special answer.

In the browser of the WebKit engine, when the animation animation of CSS 3 finishes, the Webkitanimationend event is triggered and the Webkittransitionend event is triggered when the transition animation of CSS 3 finishes executing. You can capture both events by following the code shown below.

Webkitanimationend Events

In the browser of the WebKit engine, the Webkitanimationend event is triggered when the animation animation of CSS 3 finishes executing. In CSS 3, the animation animation is defined using the style code shown below.

. element{     -webkit-animation:anime 0.5s ease-in;} @-webkit-keyframes Anime {    0% {        -webkit-transform:translate (0,0);        opacity:0.1;    }    50% {        -webkit-transform:translate (100px,0);        opacity:0.5;    }    100% {        -webkit-transform:translate (0,0);        opacity:1;}    }

The above code execution function returns the element to the right by 100 pixels within 0.5 seconds. We can execute some code in the Webkitanimationend event that is triggered at the end of the animation, such as showing the end of the animation execution and the number of times the animation was executed.

Animation Execution Count: 1

Webkitanimationend Event Firings: 1

Performing animation animation Webkittransitionend events

In the browser of the WebKit engine, the Webkittransitionend event is triggered when the transition animation of CSS 3 finishes executing. In CSS 3, the transition animation is defined using the style code shown below.

. element{-webkit-transition:all 0.25s ease-in;}. element.on{-webkit-transform:translate (100px,0);}

The above code execution function also returns the element to the right by 100 pixels within 0.5 seconds. We can execute some code in the Webkittransitionend event that is triggered at the end of the animation, such as showing the end of the animation execution and the number of times the animation was executed.

Animation Execution Count: 1

Webkittransitionend Event Firings: 2

Performing transition animations

From the execution results we can see that, during the execution of each animation, the number of times the Webkittransitionend event is triggered more than the Webkitanimationend event, This is because the Webkitanimationend event is triggered only when the element is moved to the right and then to the left, and the Webkittransitionend event fires once after the element moves to the right, and then once after the element returns to the left.

Next, we specify a opacity (transparency) style attribute for the element, and the code looks like this:

. element.on{    -webkit-transform:translate (100px,0);    opacity:0.5;}

The element's transition style property value is then specified as all, and then the number of times the Webkittransitionend event is triggered when the animation is performed.

Performing transition animations

As we can see from the execution results, if you use more than one style property, the number of webkittransitionend events will increase by two more times during each animation execution. That is, the Webkittransitionend event is triggered once after each style property value of the element has changed.

Webkitanimationend Events and Webkittransitionend events