使用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属性。

用CSS3设计动画

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

*#loading{ margin-top:30px; float:left; width:95px; height:32px; background-color:#779ec2; margin-left:30px; /* CSS3圆角边框 */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}.coloumns{ background-color:#fff; border:1px solid #fff; float:left; height:30px; margin-left:5px; width:10px; /* 在这儿我们定义一个动画名，随后我们将会实现它 */ -webkit-animation-name: animation; /* 动画循环一次的总时间 */ -webkit-animation-duration: 3s; /* 动画的循环次数，我们设置为无穷大 */ -webkit-animation-iteration-count: infinite; -webkit-animation-direction: linear; /* 最初所有列的透明度都为0 */ opacity:0; /* 开始时将它缩放为0.8 */ -webkit-transform:scale(0.8); }#coloumn1{ /* 第一列动画延迟0.3秒 */ -webkit-animation-delay: .3s; }#coloumn2{ /* 第二列动画延迟0.4秒 */ -webkit-animation-delay: .4s;}#coloumn3{ /* 第三列动画延迟0.5秒*/ -webkit-animation-delay: .5s;}#coloumn4{ /* 第四列动画延迟0.6秒*/ -webkit-animation-delay: .6s; }#coloumn5{ /* 第四列动画延迟0.7秒*/ -webkit-animation-delay: .7s;}#coloumn6{ /* 第四列动画延迟0.8秒*/ -webkit-animation-delay: .8s;}/* 之前我们曾经定义过动画的名称，我们在这儿设置动画的属性 */@-webkit-keyframes animation{ /* 在动画开始时每一列的透明度都是0 */ 0%{opacity:0;} /* 在动画中间时每一列的透明度都是1 */ 50%{opacity:1;} /*在动画结束时每一列的透明度都还原到0 */ 100%{opacity:0;}} *

加载动画2和3的CSS代码

*#loading1{ margin-top:30px; float:left; margin-left:30px;}.coloumns1{ background-color:#39F; border:1px solid #00F; float:left; height:30px; margin-left:5px; width:8px; -webkit-animation-name: animation1; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: linear; opacity:0.2; -webkit-transform:scale(0.6); }#coloumn11{ -webkit-animation-delay: .3s; }#coloumn22{ -webkit-animation-delay: .4s;}#coloumn33{ -webkit-animation-delay: .5s;}#coloumn44{ -webkit-animation-delay: .6s; }#coloumn55{ -webkit-animation-delay: .7s;}#coloumn66{ -webkit-animation-delay: .8s;}@-webkit-keyframes animation1{ 0%{-webkit-transform: scale(.9);opacity:1;} 100%{-webkit-transform: scale(.2);opacity:0.1;}}#loading2{ margin-top:30px; float:left; margin-left:30px;}.coloumns2{ -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; background-color:#39F; float:left; height:20px; margin-left:5px; width:20px; -webkit-animation-name: animation2; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: linear; opacity:0; }#coloumn111{ -webkit-animation-delay: .1s; }#coloumn222{ -webkit-animation-delay: .3s;}#coloumn333{ -webkit-animation-delay: .5s;}#coloumn444{ -webkit-animation-delay: .7s; }@-webkit-keyframes animation2{ 0%{opacity:0;} 50%{opacity:1;} 100%{opacity:0;}} *

译者注：

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

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

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

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

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