CSS3 动画 @keyframes

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 以及 JavaScript。

如下动画，常用于手机端，提示用户往下拖动的渐隐渐出效果。

 

Demo

 

关键CSS代码

1. 给相应的DIV层，定义动画的名称(mymove)、花费时间(1.6s)、播放次数(infinite)

1 animation:mymove 1.6s infinite;
2 -moz-animation:mymove 1.6s infinite; /* Firefox */
3 -webkit-animation:mymove 1.6s infinite; /* Safari and Chrome */
4 -o-animation:mymove 1.6s infinite; /* Opera */

 

2. 设置@keyframes

 1 @-webkit-keyframes mymove {
 2 0%,30% {opacity: 0;-webkit-transform: translate(0,-10px);}
 3 60% {opacity: 1;-webkit-transform: translate(0,0);}
 4 100% {opacity: 0;-webkit-transform: translate(0,10px);}
 5 }
 6 @-moz-keyframes mymove {
 7 0%,30% {opacity: 0;-moz-transform: translate(0,-10px);}
 8 60% {opacity: 1;-moz-transform: translate(0,0);}
 9 100% {opacity: 0;-moz-transform: translate(0,10px);}
10 }
11 @keyframes mymove {
12 0%,30% {opacity: 0;transform: translate(0,-10px);}
13 60% {opacity: 1;transform: translate(0,0);}
14 100% {opacity: 0;transform: translate(0,10px);}
15 }

 

完整代码(点击展开)

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>CSS Animater</title>
 6 <style>
 7 .container{
 8     width:625px;
 9     height:204px;
10     border:1px solid #ccc;    
11     position:relative;
12 }
13 
14 .start{
15     position:absolute;
16     left:50%;
17     top:50%;
18     margin-left:-25px;    
19     margin-top:-24px;
20     width:50px;
21     height:48px;
22 animation:mymove 1.6s infinite;
23 -moz-animation:mymove 1.6s infinite; /* Firefox */
24 -webkit-animation:mymove 1.6s infinite; /* Safari and Chrome */
25 -o-animation:mymove 1.6s infinite; /* Opera */
26 }
27 
28 @-webkit-keyframes mymove {
29 0%,30% {opacity: 0;-webkit-transform: translate(0,-10px);}
30 60% {opacity: 1;-webkit-transform: translate(0,0);}
31 100% {opacity: 0;-webkit-transform: translate(0,10px);}
32 }
33 @-moz-keyframes mymove {
34 0%,30% {opacity: 0;-moz-transform: translate(0,-10px);}
35 60% {opacity: 1;-moz-transform: translate(0,0);}
36 100% {opacity: 0;-moz-transform: translate(0,10px);}
37 }
38 @keyframes mymove {
39 0%,30% {opacity: 0;transform: translate(0,-10px);}
40 60% {opacity: 1;transform: translate(0,0);}
41 100% {opacity: 0;transform: translate(0,10px);}
42 }
43 
44 </style>
45 
46 </head>
47 
48 <body>
49 <div class="container">
50  <a class="start"><img src="images/arrow.png" /></a>
51 </div>
52 </body>
53 </html>
View Code

 

posted @ 2015-12-21 15:33  Kelly.Shi  阅读(1671)  评论(0)  编辑  收藏  举报