本文探讨了在时间紧迫的情况下如何为HTML5移动页面添加动效，包括CSS3时序错开渐显动画、CSS3细节强调动画、SVG动画、重力陀螺仪效果和背景音乐与音效的运用。同时分享了一些实用工具和优化技巧，旨在提升H5页面的用户体验。
作为一名前端，在拿到设计稿时你有两种选择：
1.速输出静态页面
2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来
作为一个有志向的前端，当然是选2啦！可是需求时间又很短很短，怎么办呢？
这次就来谈谈一些动画设计的小技巧，能在你时间不多又没有动画想法的时候瞬间让页面增色不少。同时也会谈及移动端H5页面的优化细节与关键点，因此本文章将分为动效篇和优化篇。
前方高能
(1)CSS3时序错开渐显动画
这是一种比较常用的动画，它的优点是节奏感强，做法就是先让每个元素隐藏，然后当页面呈现后每个元素错开时间出现。例子（忽略兼容前缀和无关属性）:
最低0.47元/天 解锁文章
扫一扫
1976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
