在開始之前，先複習一個小知識：CSS3新增的關鍵影格動畫，可以用來實現很多的動畫，我們可以透過animation-delay來控制動畫延遲執行，來實現豐富的效果。
當animation-delay的值為正值時，動畫將會延遲從初始狀態開始執行；
當animation-delay的值為負數時，動畫將會提前從該值（負數的絕對值）對應的狀態開始執行。
（效果圖片可能不太清楚，請諒解）
一、第一種效果
總共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);
}
}
#暫時先寫這麼多，後面還會有補充。
（未完待續）
以上是loading動畫有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
