动效与优化 H5移动页面设计技巧分享.pdf

文档介绍：: .
动效与优化 H5 移动页面设计技巧分享
作为一名前端，在拿到设计稿时你有两种选择：


作为一个有志向的前端，当然是选 2 啦！可是需求时间又很短很短，怎么办呢？
这次就来谈谈一些动画设计的小技巧，能在你时间不多又没有动画想法的时候瞬
间让页面增色不少。
同时也会谈及移动端 H5 页面的优化细节与关键点，因此本文章将分为动效篇和
优化篇。
一、动效篇
(1) CSS3 时序错开渐显动画
这是一种比较常用的动画，它的优点是节奏感强，做法就是先让每个元素隐藏，
然后当页面呈现后每个元素错开时间出现。
例子(忽略兼容前缀和无关属性)： : .
效果就是两个元素分别从上面掉下来，这里有个小细节(keyframes)，为了让掉
下来的动画生动点，应该是在 90%的时候先掉下一点点，然后瞬间在 100%时回跳 5px。
还有个细节，安卓 .*不能良好支持-webkit-animation-fill-mode，也就是渐
变动画不能停止在最后一帧。有这样一个解决方案：
Modernizr 去检测是否支持这个属性，加上识别
-animation-fill-mode;
：
(1)用 js 模拟同样效果;
(2)用 css 屏蔽掉动画;
(3)或者直接全部都用 transition 来做(不要 keyframes)。
示例页面如下(查看 DEMO)： : .
(2) CSS3 细节强调动画
一些局部细节如果还是渐现显示，会枯燥没什么感觉，例如标题、按钮等，需要
一种强调。
分两种情况：
，基本做法是先把一个元素切成不同的块状，例如小人的手
脚都切成不同图片，然后让它们重新组合，再通过赋予不同的 CSS 动画来让它生动起