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

  

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

  

用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，实现较复杂，能实现更高级的效果。