Share an example of monitoring css3 animation end event-CSS Tutorial-php.cn

Share an example of monitoring css3 animation end event

零下一度

Release： 2017-05-18 14:29:27

Original

5214 people have browsed it

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("动画结束");
})

Copy after login

-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("动画结束");
})

Copy after login

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>

Copy after login

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!