原文地址：[http://webdesignersdesk.com/2010/05/create-ajax-loading-animation-with-css3/](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，實現較復雜，能實現更高級的效果。