第一种方法：
用计时器，设定一个和动画时长一样的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>