Home > Article > Web Front-end > Share an example of monitoring css3 animation end event
Share an example of monitoring css3 animation end event
- 零下一度Original
- 2017-05-18 14:29:275151browse
When CSS3 animation completes an animation, we want the animation to remain in the terminated state or some other event. How to do it?
We can listen to the webkitAnimationEnd event
// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
console.log("动画结束");
})-webkit-animation animation has three events:
Start event: webkitAnimationStart
End event: webkitAnimationEnd
Repeat motion event: webkitAnimationIteration
// 动画开始时事件o.addEventListener("webkitAnimationStart", function() {
console.log("动画开始");
})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() {
console.log("动画重复运动");
})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
console.log("动画结束");
})Example:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>webkitAnimationEnd</title><style type="text/css">#p1{
margin: 200px auto 0;
width: 200px;
height: 200px;
color: #fff;
background-color: #000;
-webkit-animation: transform 3s 2 ease;}@-webkit-keyframes transform {
0%{
-webkit-transform: scale(1) rotate(50deg);
}
30%{
-webkit-transform: scale(2) rotate(100deg);
}
6%{
-webkit-transform: scale(0.5) rotate(-100deg);
}
100%{
-webkit-transform: scale(1) rotate(0);
}}</style></head><body><p id="p1"></p><script type="text/javascript">var o = document.getElementById("p1");// 动画开始时事件o.addEventListener("webkitAnimationStart", function() {
alert("动画开始");
})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() {
alert("动画重复运动");
})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() { this.className = "";
alert("动画结束");
})</script></body></html>The transition attribute transition of css3 also has an end when the animation ends Event: webkitTransitionEnd
Note: There is only one event for transition
[Related recommendations]
1. Detailed introduction to animation in CSS3- direction attribute
2. The 8 properties of CSS3 animation (Animation) that must be mastered
3. Use the animation attribute to achieve delay between loops Execution example tutorial
4. Detailed explanation of the two pause methods (transition, animation) in css3
The above is the detailed content of Share an example of monitoring css3 animation end event. For more information, please follow other related articles on the PHP Chinese website!