1.快速输出静态页面

2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来

作为一个有志向的前端，当然是选2啦！可是需求时间又很短很短，怎么办呢？

这次就来谈谈一些动画设计的小技巧，能在你时间不多又没有动画想法的时候瞬间让页面增色不少。

同时也会谈及移动端H5页面的优化细节与关键点，因此本文章将分为动效篇和优化篇。

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

（1）  CSS3时序错开渐显动画

这是一种比较常用的动画，它的优点是节奏感强，做法就是先让每个元素隐藏，然后当页面呈现后每个元素错开时间出现。

例子（忽略兼容前缀和无关属性）：

效果就是两个元素分别从上面掉下来，这里有个小细节（keyframes），为了让掉下来的动画生动点，应该是在90%的时候先掉下一点点，然后瞬间在100%时回跳5px。

还有个细节，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是渐变动画不能停止在最后一帧。有这样一个解决无痛人流：

1.用Modernizr去检测是否支持这个属性，加上识别类.no-animation-fill-mode；

2.根据识别类采取以下措施：
（1）用js模拟同样效果；
（2）用css屏蔽掉动画；
（3）或者直接全部都用transition来做（不要keyframes）。