1.快速輸出靜態(tài)頁(yè)面

2.加上高級(jí)大氣上檔次狂拽炫酷屌炸天的動(dòng)畫(huà)讓頁(yè)面動(dòng)起來(lái)

作為一個(gè)有志向的前端，當(dāng)然是選2啦！可是需求時(shí)間又很短很短，怎么辦呢？

這次就來(lái)談?wù)勔恍﹦?dòng)畫(huà)設(shè)計(jì)的小技巧，能在你時(shí)間不多又沒(méi)有動(dòng)畫(huà)想法的時(shí)候瞬間讓頁(yè)面增色不少。

同時(shí)也會(huì)談及移動(dòng)端H5頁(yè)面的優(yōu)化細(xì)節(jié)與關(guān)鍵點(diǎn)，因此本文章將分為動(dòng)效篇和優(yōu)化篇。

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

（1）  CSS3時(shí)序錯(cuò)開(kāi)漸顯動(dòng)畫(huà)

這是一種比較常用的動(dòng)畫(huà)，它的優(yōu)點(diǎn)是節(jié)奏感強(qiáng)，做法就是先讓每個(gè)元素隱藏，然后當(dāng)頁(yè)面呈現(xiàn)后每個(gè)元素錯(cuò)開(kāi)時(shí)間出現(xiàn)。

例子（忽略兼容前綴和無(wú)關(guān)屬性）：

效果就是兩個(gè)元素分別從上面掉下來(lái)，這里有個(gè)小細(xì)節(jié)（keyframes），為了讓掉下來(lái)的動(dòng)畫(huà)生動(dòng)點(diǎn)，應(yīng)該是在90%的時(shí)候先掉下一點(diǎn)點(diǎn)，然后瞬間在100%時(shí)回跳5px。

還有個(gè)細(xì)節(jié)，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是漸變動(dòng)畫(huà)不能停止在最后一幀。有這樣一個(gè)解決方案：

1.用Modernizr去檢測(cè)是否支持這個(gè)屬性，加上識(shí)別類(lèi).no-animation-fill-mode；

2.根據(jù)識(shí)別類(lèi)采取以下措施：
（1）用js模擬同樣效果；
（2）用css屏蔽掉動(dòng)畫(huà)；
（3）或者直接全部都用transition來(lái)做（不要keyframes）。