使用CSS3构建Ajax加载动画

原文地址：http://webdesignersdesk.com/2010/05/create-ajax-loading-animation-with-css3/

译者：蒋宇捷

 

 

 

  

    通常前端工程师采用gif动画图片来表现Ajax的加载。但是现在css3已经引入了动画属性，我们可以在不采用gif动画图片的情况下，采用css3达到同样的Ajax加载动画效果。那么让我们现在开始来实现想要的效果。

  

重要提示：只支持Webkit内核的浏览器（Safari和Chrome）

示例

HTML

    在这里我们只展示demo里第一个Ajax载入示例的代码。首先我们需要一个名为“loading”的容器，以放置所有的动画元素。然后我们需要为每一列定义一个单独的div，并且统一定义一个class属性。

  

[javascript] view plaincopy

1. <div id='loading'>  
2.                  <div id='coloumn1' class='coloumns'></div>  
3.                  <div id='coloumn2' class='coloumns'></div>  
4.                  <div id='coloumn3' class='coloumns'></div>  
5.                  <div id='coloumn4' class='coloumns'></div>  
6.                  <div id='coloumn5' class='coloumns'></div>  
7.                  <div id='coloumn6' class='coloumns'></div>  
8. </div>  

    

用CSS3设计动画

  

下面所有的代码都带有注释。

 

[javascript] view plaincopy

1. #loading{  
2.     margin-top:30px;  
3.     float:left;  
4.     width:95px;  
5.     height:32px;  
6.     background-color:#779ec2;  
7.     margin-left:30px;  
8.     /* CSS3圆角边框 */  
9.     -webkit-border-radius: 5px;  
10.     -moz-border-radius: 5px;  
11.     border-radius: 5px;  
12. }  
13. .coloumns{  
14.     background-color:#fff;  
15.     border:1px solid #fff;  
16.     float:left;  
17.     height:30px;  
18.     margin-left:5px;  
19.     width:10px;  
20.     /* 在这儿我们定义一个动画名，随后我们将会实现它 */  
21.     -webkit-animation-name: animation;  
22.     /* 动画循环一次的总时间 */  
23.     -webkit-animation-duration: 3s;  
24.     /* 动画的循环次数，我们设置为无穷大 */  
25.     -webkit-animation-iteration-count: infinite;  
26.     -webkit-animation-direction: linear;  
27.     /* 最初所有列的透明度都为0 */  
28.     opacity:0;  
29.     /* 开始时将它缩放为0.8 */  
30.     -webkit-transform:scale(0.8);  
31.     }  
32. #coloumn1{  
33.     /* 第一列动画延迟0.3秒 */  
34.     -webkit-animation-delay: .3s;  
35.  }  
36. #coloumn2{  
37.     /* 第二列动画延迟0.4秒 */  
38.     -webkit-animation-delay: .4s;  
39. }  
40. #coloumn3{  
41.     /* 第三列动画延迟0.5秒*/  
42.     -webkit-animation-delay: .5s;  
43. }  
44. #coloumn4{  
45.     /* 第四列动画延迟0.6秒*/  
46.     -webkit-animation-delay: .6s;  
47.  }  
48. #coloumn5{  
49.     /* 第四列动画延迟0.7秒*/  
50.     -webkit-animation-delay: .7s;  
51. }  
52. #coloumn6{  
53.     /* 第四列动画延迟0.8秒*/  
54.     -webkit-animation-delay: .8s;  
55. }  
56. /* 之前我们曾经定义过动画的名称，我们在这儿设置动画的属性 */  
57. @-webkit-keyframes animation{  
58.     /* 在动画开始时每一列的透明度都是0 */  
59.     0%{opacity:0;}  
60.     /* 在动画中间时每一列的透明度都是1 */  
61.     50%{opacity:1;}  
62.     /*在动画结束时每一列的透明度都还原到0 */  
63.     100%{opacity:0;}  
64. }  

 

 

加载动画2和3的CSS代码

[javascript] view plaincopy

1. #loading1{  
2.     margin-top:30px;  
3.     float:left;  
4.     margin-left:30px;  
5. }  
6. .coloumns1{  
7.     background-color:#39F;  
8.     border:1px solid #00F;  
9.     float:left;  
10.     height:30px;  
11.     margin-left:5px;  
12.     width:8px;  
13.     -webkit-animation-name: animation1;  
14.     -webkit-animation-duration: 2s;  
15.     -webkit-animation-iteration-count: infinite;  
16.     -webkit-animation-direction: linear;  
17.     opacity:0.2;  
18.     -webkit-transform:scale(0.6);  
19.     }  
20. #coloumn11{  
21.     -webkit-animation-delay: .3s;  
22.  }  
23. #coloumn22{  
24.     -webkit-animation-delay: .4s;  
25. }  
26. #coloumn33{  
27.     -webkit-animation-delay: .5s;  
28. }  
29. #coloumn44{  
30.     -webkit-animation-delay: .6s;  
31.  }  
32. #coloumn55{  
33.     -webkit-animation-delay: .7s;  
34. }  
35. #coloumn66{  
36.     -webkit-animation-delay: .8s;  
37. }  
38. @-webkit-keyframes animation1{  
39.     0%{-webkit-transform: scale(.9);opacity:1;}  
40.     100%{-webkit-transform: scale(.2);opacity:0.1;}  
41. }  
42. #loading2{  
43.     margin-top:30px;  
44.     float:left;  
45.     margin-left:30px;  
46. }  
47. .coloumns2{  
48.     -webkit-border-radius: 10px;  
49. -moz-border-radius: 10px;  
50. border-radius: 10px;  
51.     background-color:#39F;  
52.     float:left;  
53.     height:20px;  
54.     margin-left:5px;  
55.     width:20px;  
56.     -webkit-animation-name: animation2;  
57.     -webkit-animation-duration: 2s;  
58.     -webkit-animation-iteration-count: infinite;  
59.     -webkit-animation-direction: linear;  
60.     opacity:0;  
61.     }  
62. #coloumn111{  
63.     -webkit-animation-delay: .1s;  
64.  }  
65. #coloumn222{  
66.     -webkit-animation-delay: .3s;  
67. }  
68. #coloumn333{  
69.     -webkit-animation-delay: .5s;  
70. }  
71. #coloumn444{  
72.     -webkit-animation-delay: .7s;  
73.  }  
74. @-webkit-keyframes animation2{  
75.     0%{opacity:0;}  
76.     50%{opacity:1;}  
77.     100%{opacity:0;}  
78. }  

 

 

译者注：

    现在我们有了四种实现HTML动画的方式：

   1、GIF动画图片，优点方便，缺点是256色，背景不能完全透明，效果较差。

   2、CSS3控制，缺点是只有在支持CSS3的浏览器上有效果、实现较复杂，优点是效果好，效率高。

   3、Javascript实现，效果和CSS实现类似，效率不如原生CSS，但是可以跨浏览器支持。

   4、HTML5 Canvas，实现较复杂，能实现更高级的效果。