1.快速輸出靜態頁面

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

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

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

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

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

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

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

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

效果(guo)就(jiu)是兩(liang)個元(yuan)素(su)分別從上面(mian)掉(diao)(diao)下(xia)來，這(zhe)里有個小細節（keyframes），為了讓掉(diao)(diao)下(xia)來的(de)動畫生動點(dian)，應該是在90%的(de)時候(hou)先掉(diao)(diao)下(xia)一點(dian)點(dian)，然(ran)后(hou)瞬間在100%時回跳5px。

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

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

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