當css3的animation完成一個動畫，我們想讓動畫保持在終止的狀態或其他一些事件，要怎么做呢
我們可以監聽 webkitAnimationEnd 事件就可以
// 動畫結束時事件 o.addEventListener("webkitAnimationEnd", function() { console.log("動畫結束"); })
-webkit-animation動畫有三個事件：
開始事件: webkitAnimationStart
結束事件: webkitAnimationEnd
重復運動事件: webkitAnimationIteration
// 動畫開始時事件 o.addEventListener("webkitAnimationStart", function() { console.log("動畫開始"); }) // 動畫重復運動時事件 o.addEventListener("webkitAnimationIteration", function() { console.log("動畫重復運動"); }) // 動畫結束時事件 o.addEventListener("webkitAnimationEnd", function() { console.log("動畫結束"); })
示例：
<!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("webkitAnimationStart", function() { alert("動畫開始"); }) // 動畫重復運動時事件 o.addEventListener("webkitAnimationIteration", function() { alert("動畫重復運動"); }) // 動畫結束時事件 o.addEventListener("webkitAnimationEnd", function() { this.className = ""; alert("動畫結束"); }) </script> </body> </html>
css3的過渡屬性transition，在動畫結束時，也存在結束的事件：webkitTransitionEnd
注意：transition 僅有這一個事件