CSS3-loading動畫（一），CSS3-loading動畫(

CSS3-loading動畫（一），CSS3-loading動畫(

前兩天從一個網站中看到了一些比較好的loading動畫效果，是用純CSS3來寫的，感覺不錯，就嘗試著照著效果來自己寫出來。

在開始之前，先複習一個小知識：CSS3新增的主要畫面格動畫，可以用來實現很多的動畫，我們可以通過animation-delay來控制動畫順延強制，來實現豐富的效果。

當animation-delay的值為正值時，動畫將被延遲從初始狀態開始執行；

當animation-delay的值為負數時，動畫將被提前從該值（負數的絕對值）對應的狀態開始執行。

 

線上demo：http://liyunpei.xyz/loading.html    （持續更新）

（片可能不太清楚，請諒解）

一、第一種效果

一共16個小正方形，將位置定位，通過主要畫面格來改變正方形的透明度

{animation: ball 2s 0s ease infinite;}@keyframes ball {      0%{        opacity: 1;      }      50%{        opacity: 1;      }      51%{        opacity: 0;      }    }

對每一個正方形設定animation-delay值，在這裡我的整體動畫耗時是2s，均分16個正方形是0.125s，於是我設定的animation-delay值是從-1.875s開始以0.125的數差開始增加一直到0。

二、第二種效果

中間一個大球的位置不變，旁邊三個小球分別包含在三個正方形中，將小球設定定位{top:0;left:0;}，通過設定正方形rotateZ旋轉便可以形成這種交叉。

通過主要畫面格動畫來設定動畫過程（下面主要畫面格動畫的書寫並不是最好的方法），並給每個小球設定animation-delay的值，可以讓三個小球在不同的時刻從正面通過。

{animation: turn_atom 1.5s 0s ease infinite;}@keyframes turn_atom {      0%{        height:25px;        width: 25px;        top: 0;        left: 0;      }      50%{        height: 20px;        width: 20px;        top: 60px;        left: 60px;      }      51%{        height: 15px;        width: 15px;        top: 60px;        left: 60px;      }      100%{        height: 20px;        width: 20px;        top: 0;        left: 0;      }    }

另外，還需要給三個小球的父容器通過主要畫面格動畫設定z-index值，來達到當小球是在圍繞大球旋轉的視覺效果。

{animation: turn_atomZ 1.5s 0s ease infinite;}@keyframes turn_atomZ {      0%{        z-index: 6;      }      50%{        z-index: 6;      }      51%{        z-index: 4;      }    }

三、第三種效果

 

這種效果就比較簡單了，只要改變小球的大小以及透明度就行了（透明度以及小球的寬高在初始時已定義）。

{animation: light 1.5s 0s ease infinite;}@keyframes light {      50%{        opacity: 0.4;        height: 15px;        width: 15px;      }    }

四、第四種效果

初始時，四個小球定位到同一個位置，通過主要畫面格來改變小球的left值以及小球的大小即可。

{animation: r_ball 2s 0s ease infinite,r_ballZ 2s 0s ease infinite;}@keyframes r_ball {      50%{        left: 100%;      }    }    @keyframes r_ballZ {      25%{        transform: scale(0.5);      }      50%{        transform: scale(1);      }    }

 

暫時就先寫這麼多，後面還會有補充。

（未完待續）