1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="author" content="@my_programmer"> 6 <title>webkitAnimationEnd</title> 7 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 8 <meta name="apple-mobile-web-app-capable" content="yes" /> 9 <meta name="format-detection" content="telephone=no"/> 10 <style type="text/css"> 11 #div{ width:200px; height:200px; background:#f60; margin:100px auto; 12 } 13 .fade{ -webkit-animation: fadeOut 2s 1 ease-in-out;} 14 .change{ -webkit-animation: transform 1s 2 ease; } 15 @-webkit-keyframes fadeOut { /*淡出*/ 16 0% {opacity: 0; } 17 100% {opacity: 1; } 18 } 19 @-webkit-keyframes transform { /*放大缩小*/ 20 0% { -webkit-transform: scale(1)} 21 30% { -webkit-transform: scale(1.2)} 22 60% { -webkit-transform: scale(0.8)} 23 90% { -webkit-transform: scale(1)} 24 } 25 </style> 26 </head> 27 <body> 28 <div id="div" class="fade"></div> 29 <script type="text/javascript"> 30 var tt = document.querySelector(‘#div‘); 31 32 tt.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件 33 this.className = ‘change‘; 34 console.log(2); 35 }, false); 36 </script> 37 </body> 38 </html>
CSS3使用AnimationEnd为同一个元素添加多个动画效果
原文：http://www.cnblogs.com/dingquanjun/p/4958209.html
