阅读排行

CSS3使用AnimationEnd为同一个元素添加多个动画效果

 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>

先淡出再放大缩小

文章来自：http://www.cnblogs.com/dingquanjun/p/4958209.html