第一種方法:
用計時器,設定一個和動畫時長一樣的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>