使用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'><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，實現較複雜，能實現更進階的效果。