使用CSS3构建Ajax加载动画(转http://blog.csdn.net/hfahe/archive/2011/02/10/6177825.aspx)

此文于2011-02-16被推荐到CSDN首页
如何被推荐？
原文地址：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属性。

view plaincopy to clipboardprint?
<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>
<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设计动画

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

view plaincopy to clipboardprint?
#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;}
}
#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代码

view plaincopy to clipboardprint?
#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;}
}
#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，实现较复杂，能实现更高级的效果。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/hfahe/archive/2011/02/10/6177825.aspx