1.快速輸出靜態頁面

2.加上高級大氣上檔次狂拽炫酷屌炸天的動畫讓頁面動起來

作為一個有志向的前端，當然是選2啦！可是需求時間又很短很短，怎么辦呢？

這次就來談談一些動畫設計的小技巧，能在你時間不多又沒有動畫想法的時候瞬間讓頁面增色不少。

同時也會談及移動端H5頁面的優化細節與關鍵點，因此本文章將分為動效篇和。

====前方高能====

（1）  CSS3時序錯開漸顯動畫

這是一種比較常用的動畫，它的優點是節奏感強，做法就是先讓每個元素隱藏，然后當頁面呈現后每個元素錯開時間出現。

例子（忽略兼容前綴和無關屬性）：

效果就是兩個元素分別(bie)從上面掉下來(lai)(lai)，這里有個小細節（keyframes），為了讓掉下來(lai)(lai)的動(dong)畫生動(dong)點(dian)，應該是在(zai)90%的時(shi)(shi)候先掉下一(yi)點(dian)點(dian)，然后瞬(shun)間(jian)在(zai)100%時(shi)(shi)回跳5px。

還有(you)(you)個(ge)細(xi)節，安卓2.3.*不(bu)能良好支持(chi)-webkit-animation-fill-mode，也就是漸變(bian)動(dong)畫不(bu)能停止在最后一幀。有(you)(you)這樣一個(ge)解決方(fang)案：

1.用(yong)去檢測是(shi)否支持(chi)這個屬性，加上識別類.no-animation-fill-mode；

2.根據識別類采取以下措施：
（1）用js模擬同樣效果；
（2）用css屏蔽掉動畫；
（3）或(huo)者直接全部都用(yong)transition來(lai)做(zuo)（不要keyframes）。