学步园

原文地址：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属性。

<div id='loading'><br /> <div id='coloumn1' class='coloumns'></div><br /> <div id='coloumn2' class='coloumns'></div><br /> <div id='coloumn3' class='coloumns'></div><br /> <div id='coloumn4' class='coloumns'></div><br /> <div id='coloumn5' class='coloumns'></div><br /> <div id='coloumn6' class='coloumns'></div><br /> </div> 

用CSS3设计动画

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

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

加载动画2和3的CSS代码

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

译者注：

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

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

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

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

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