前幾篇介紹了CSS3的3個動畫屬性transform稼跳，transition酪术，animation。但即使基本語法能看懂经瓷，也不代表能設(shè)計出棒棒的動畫效果爆哑。在設(shè)計這條路上，是學無止境舆吮，甚至需要拼天賦的揭朝。我也很菜，只能站在優(yōu)秀的設(shè)計師的肩膀上色冀，模擬出一些效果潭袱。
例如非常常見的Loading的效果，你完全可以用GIF來實現(xiàn)锋恬。但GIF有它的局限屯换，例如顏色數(shù)量被限制在256色。不具備Alpha透明伶氢，導致無法做出半透明效果趟径。不夠靈活瘪吏，一旦GIF動畫生成后癣防，例如動畫持續(xù)時間，循環(huán)次數(shù)等都固定住了掌眠，要想修改蕾盯，只能用圖像處理軟件再去編輯GIF。
因此我們用CSS3來實現(xiàn)動畫效果蓝丙，參照網(wǎng)上的設(shè)計级遭，分享一下常見的Loading。你可以點這里
例子1：菊花狀的Loading效果
第一步畫出靜態(tài)的小菊花渺尘。
.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>
代碼如上挫鸽，靜態(tài)小菊花其實是一個外層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);}
… //節(jié)省篇幅，每個圓每隔30度遞增旋轉(zhuǎn)
.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將各個圓點旋轉(zhuǎn)干茉，形成完整的菊花狀。如果你對transform不熟的話很泊，看下圖角虫，第二個圓點旋轉(zhuǎn)30度的示意圖沾谓，其余圓點的旋轉(zhuǎn)自行腦補：
第三步通過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;
}
這樣每個點都在像信號燈一樣同步地閃爍戳鹅。
最后一步搏屑，給每個點設(shè)置animation-delay延時，以錯開閃爍的時間粉楚，形成常見的菊花轉(zhuǎn)轉(zhuǎn)的效果
.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開始閃爍（負數(shù)不理解的話燃异，參考animation一文携狭，意思是從該時間點開始啟動，之前的動畫效果不顯示）回俐。之后每個圓點均以0.1s遞增的速度延遲逛腿。最終形成常見的菊花轉(zhuǎn)轉(zhuǎn)的Loading效果
明白了原理后，無非是在例子1的基礎(chǔ)上仅颇，將圓點改成豎條单默，opacity半透明即可。你可以在例子頁面自行查看源碼
上面的例子純CSS實現(xiàn)Loading效果忘瓦，缺點是除了需要一定的設(shè)計天賦外搁廓，如果將來需求變了，需要加上一點其他效果時耕皮，維護起來也有一定的技術(shù)門檻境蜕。包括源代碼中HTML和CSS的體積比較大。其實也可以用繪圖軟件凌停，根據(jù)需求粱年，先制作出一張靜態(tài)的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的大小設(shè)為100*100px正好只夠顯示第一幀的背景圖。現(xiàn)在加上動畫效果舟舒，即通過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函數(shù)切換8次，每次切換就是將整張圖往左偏移100px，效果點這里皆尔。究竟是要HTML呐舔，CSS體積小，用PNG配合CSS來實現(xiàn)慷蠕，還是純CSS來實現(xiàn)珊拼，都有優(yōu)劣，并無固定標準流炕。
例子4：琴譜版Loading
第一步澎现，畫出靜態(tài)琴譜，很簡單無非是一個外層div每辟，內(nèi)嵌幾個并排的div而已
.spinner {
height: 40px;
}
.spinner > div {
background-color: #333;
height: 100%;
width: 6px;
display: inline-block;
}
<div class="spinner">
<div></div>
… //你可以根據(jù)需求多加幾個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實現(xiàn)旋轉(zhuǎn)。例3用了transform的scaleY實現(xiàn)拉伸渠欺。
最后一步妹蔽，設(shè)置延時，讓每個琴鍵在不同時間內(nèi)拉伸
.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>
… //為節(jié)省篇幅省略中間代碼
<div class="rect5"></div>
</div>
每個琴鍵的拉伸間隔時間0.1s挠将，因此第1個琴鍵沒有animation-delay延時胳岂，立即拉伸。第二個琴鍵舔稀，從-1.1s開始閃爍乳丰。之后每個琴鍵均以0.1s遞增的速度拉伸。和菊花Loading的原理是一樣的镶蹋，不贅述成艘。
例子5：簡書版Loading
明白了原理后，無非是在例子3的基礎(chǔ)上贺归，將琴鍵改成原點，改改顏色即可断箫。你可以在例子頁面自行查看源碼
總結(jié)
更多的Loading例子拂酣，網(wǎng)上有很多優(yōu)秀的例子，例如cssload仲义。但Loading的動畫效果最多只能算一盤餐前小點婶熬，你可以充分挖掘CSS3的動畫屬性的潛力，制作出更炫的效果埃撵。
