https://www.jianshu.com/p/55372466ce70

前幾篇介紹了CSS3的3個動畫屬性transform，transition，animation。但即使基本語法能看懂，也不代表能設計出棒棒的動畫效果。在設計這條路上，是學無止境，甚至需要拼天賦的。我也很菜，只能站在優秀的設計師的肩膀上，模擬出一些效果。

例如非常常見的Loading的效果，你完全可以用GIF來實現。但GIF有它的侷限，例如顏色數量被限制在256色。不具備Alpha透明，導致無法做出半透明效果。不夠靈活，一旦GIF動畫生成後，例如動畫持續時間，迴圈次數等都固定住了，要想修改，只能用影象處理軟體再去編輯GIF。

因此我們用CSS3來實現動畫效果，參照網上的設計，分享一下常見的Loading。你可以點這裡

例子1：菊花狀的Loading效果

第一步畫出靜態的小菊花。

.sk-fading-circle {
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
}

<div class="sk-fading-circle">
  <div class="sk-circle"></div>
  … //為縮減篇幅省略中間10個div
  <div class="sk-circle"></div>
</div>
 

程式碼如上，靜態小菊花其實是一個外層div裡巢狀12個小div。小div通過 border-radius畫成圓型，並通過margin: 0 auto;定位到頂格居中位置。由於12個小div都是absolute定位，因此都重疊在了一起。

第二步將12個重疊的圓分散開。

.sk-fading-circle .sk-circle2 { transform: rotate(30deg);}
.sk-fading-circle .sk-circle3 { transform: rotate(60deg);}
… //節省篇幅，每個圓每隔30度遞增旋轉
.sk-fading-circle .sk-circle12 { transform: rotate(330deg);}

<div class="sk-fading-circle">
  <div class="sk-circle1 sk-circle"></div>
  … //為縮減篇幅省略中間10個div
  <div class="sk-circle12sk-circle"></div>
</div>
 

程式碼如上，用transform的rotate將各個圓點旋轉，形成完整的菊花狀。如果你對transform不熟的話，看下圖，第二個圓點旋轉30度的示意圖，其餘圓點的旋轉自行腦補：

第三步通過animation控制opacity屬性，讓每個點淡進淡出

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}
@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}
.sk-fading-circle .sk-circle:before {
  ……
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}

這樣每個點都在像訊號燈一樣同步地閃爍。

最後一步，給每個點設定animation-delay延時，以錯開閃爍的時間，形成常見的菊花轉轉的效果

.sk-fading-circle .sk-circle2:before {animation-delay: -1.1s; }
.sk-fading-circle .sk-circle3:before { animation-delay: -1s; }
.sk-fading-circle .sk-circle4:before { animation-delay: -0.9s; }
… //為縮減篇幅省略中間程式碼
.sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; }

因為是12個圓點，每個圓點的閃爍間隔時間0.1s，因此第1個圓點沒有animation-delay延時，立即閃爍。第二個圓點，從-1.1s開始閃爍（負數不理解的話，參考animation一文，意思是從該時間點開始啟動，之前的動畫效果不顯示）。之後每個圓點均以0.1s遞增的速度延遲。最終形成常見的菊花轉轉的Loading效果

例子2：ios版菊花Loading

明白了原理後，無非是在例子1的基礎上，將圓點改成豎條，opacity半透明即可。你可以在例子頁面自行檢視原始碼

例子3：菊花狀的Loading效果（用PNG實現）

上面的例子純CSS實現Loading效果，缺點是除了需要一定的設計天賦外，如果將來需求變了，需要加上一點其他效果時，維護起來也有一定的技術門檻。包括原始碼中HTML和CSS的體積比較大。其實也可以用繪圖軟體，根據需求，先製作出一張靜態的PNG圖：

如上面8幀圖，每張都是100*100大小，合併後是一張800*100的PNG圖。我們先將第一幀的圖顯示出來：

.loader {
    width: 100px; height: 100px;
    text-indent: 999px; overflow: hidden; /* Hide text */
    background-image: url(loader.png);
}
<div class="loader">Loading...</div>

div的大小設為100*100px正好只夠顯示第一幀的背景圖。現在加上動畫效果，即通過background-position: -100px, 0;讓整張圖往左偏移100px來顯示下一幀的圖。但顯然不能線性偏移，需要將預設值ease改成steps(8)：

@keyframes loader {
    to { background-position: -800px 0; }
}
.loader {
    ……
    animation: loader 1s infinite steps(8);
}

上面的動畫效果程式碼非常短，就2,3行而已，每秒通過steps函式切換8次，每次切換就是將整張圖往左偏移100px，效果點這裡。究竟是要HTML，CSS體積小，用PNG配合CSS來實現，還是純CSS來實現，都有優劣，並無固定標準。

例子4：琴譜版Loading

第一步，畫出靜態琴譜，很簡單無非是一個外層div，內嵌幾個並排的div而已

.spinner {
  height: 40px;
}
.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
}

<div class="spinner">
  <div></div>
  … //你可以根據需求多加幾個div
  <div></div>
</div>

第二步，琴譜動起來

.spinner > div {
  ……
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
@keyframes sk-stretchdelay {
  0%, 40%, 100% { transform: scaleY(0.4); }  
  20% { transform: scaleY(1.0); }
}

例1,2中用了transform的rotate實現旋轉。例3用了transform的scaleY實現拉伸。

最後一步，設定延時，讓每個琴鍵在不同時間內拉伸

.spinner .rect2 {  animation-delay: -1.1s; }
.spinner .rect3 { animation-delay: -1.0s; }
.spinner .rect4 { animation-delay: -0.9s; }
.spinner .rect5 { animation-delay: -0.8s; }

<div class="spinner">
  <div class="rect1"></div>
  … //為節省篇幅省略中間程式碼
  <div class="rect5"></div>
</div>

每個琴鍵的拉伸間隔時間0.1s，因此第1個琴鍵沒有animation-delay延時，立即拉伸。第二個琴鍵，從-1.1s開始閃爍。之後每個琴鍵均以0.1s遞增的速度拉伸。和菊花Loading的原理是一樣的，不贅述。

例子5：簡書版Loading

明白了原理後，無非是在例子3的基礎上，將琴鍵改成原點，改改顏色即可。你可以在例子頁面自行檢視原始碼

總結

更多的Loading例子，網上有很多優秀的例子，例如cssload。但Loading的動畫效果最多隻能算一盤餐前小點，你可以充分挖掘CSS3的動畫屬性的潛力，製作出更炫的效果。

作者：張歆琳
連結：https://www.jianshu.com/p/55372466ce70
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。