Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "CSS3 animation callback processing method". The editor shows you the operation process through the actual case. The operation method is simple, fast and practical. I hope this "CSS3 animation callback processing method" article can help you solve the problem.

CSS3 animation can also do callback processing, here is divided into two properties, one is transition [W3C document], the other is animation [W3C document].

1 、 transition

For transition, you can listen for transitionend events, which are triggered when the animation is complete, and you can use:

The code is as follows:

Css3-transitionend-BeyondWeb

* {margin: 0; padding: 0;}

.rect {

Width: 100px

Height: 100px

Background-color: # f80

-webkit-transition: all .5s

}

_ window.onload = function () {

Var _ rect = document.querySelector ('.rect')

_ rect.onclick = function () {

_ rect.style.webkitTransform = 'translateX (300px)'

}

_ rect.addEventListener ('webkitTransitionEnd', function () {

Alert ('Animation finished!')

/ / callback here

}, false)

}

2 、 animation

For animation, we can listen to animationend events. The sample code is as follows:

Css3-animationend-BeyondWeb

* {margin: 0; padding: 0;}

.rect {

Position: relative

Width: 100px

Height: 100px

Background-color: # f80

}

@-webkit-keyframes move {

From {

-webkit-transform: rotate (0)

}

To {

-webkit-transform: rotate (360deg)

}

}

_ window.onload = function () {

Var _ rect = document.querySelector ('.rect')

_ rect.onclick = function () {

_ rect.style.webkitAnimation = 'move 3s'

}

_ rect.addEventListener ('webkitAnimationEnd', function () {

Alert ('Animation finished!')

/ / callback here

}, false)

}

This is the end of the content about "the method of handling callback of CSS3 animation". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.