css3在動畫完成后執行事件


第一種方法: 
用計時器,設定一個和動畫時長一樣的time,過time事件去執行這個函數。 
setTimeout(function(){ },time); 
第二種方法: 

當-webkit-animation動畫結束時有一個webkitAnimationEnd事件,只要監聽這個事件就可以了。 

不同瀏覽器的AnimationEnd寫法 (webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)

例子: 

<!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">
#div1{
    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>
<div id="div1"></div>
<script type="text/javascript">
    var o = document.getElementById("div1");
   
    o.addEventListener("webkitAnimationEnd", function() {
       // this.className = "";
        alert("動畫結束");
    })
</script>
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM