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

【使用CSS3构建Ajax加载动画】相关文章

1. 使用CSS3构建Ajax加载动画

2. CSS3实现的图片加载动画效果

3. 超酷jQuery进度条加载动画集合

4. 使用CSS3的褪色和动画效果构建消息提醒框

5. 使用 CSS3 实现超炫的 Loading（加载）动画效果

6. 使用 CSS3 实现超炫的 Loading（加载）动画效果

7. 使用CSS3的step()生成的动画效果

8. 使用CSS3设计漂亮的动画效果3D大按钮

9. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

10. 使用CSS3帧动画打造与众不同的响应式提交按钮

本文来源：https://www.51html5.com/a3355.html