A. 怎样通过HTML5让移动APP页面有动效(一)
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)。
2. CSS3细节强调动画
一些局部细节如果还是渐现显示，会枯燥没什么感觉，例如标题、按钮等，需要一种强调。分两种情况：
1.如果时间允许的话，基本做法是先把一个元素切成不同的块状，例如小人的手脚都切成不同图片，然后让它们重新组合，再通过赋予不同的CSS动画来让它生动起来。
2.如果时间紧凑，又不像桑尼一样擅长于动画细节，可以使用一些辅助工具：Animate.css，通过直接预览选择想要的动效，然后下载它的CSS把对应的keyframe扒下来就好了(引用整个CSS是资源浪费)。
以上就是小编关于怎样通过HTML5让移动APP页面有动效的相关分享，希望对大家有所帮助，想要了解更多HTML5相关内容，还请关注本平台。
B. 怎样通过HTML5让移动APP页面有动效(二)
3.SVG动画
SVG技术越来越不陌生，使用门槛也渐渐降低，而且SVG动画还可以使用CSS控制。然而这种动画也是略耗时，但有一种比较常用的，就是线条的描绘动画，CSS3比较难实现，这里可以用SVG。
介绍一个PS插件 svgArtisan(目前还未有主页)，这个工具可以直接根据PSD的路径图层生成SVG图形。接下来就简单了，将设计稿上的路径图形用插件生成对应的SVG，(注意，其中的foreignObject标签内是不支持svg的浏览器会看到一张.m3-svg-nosupport标签下的图片。)再使用CSS3的animation控制stroke-dashoffset：效果不难吧!SVG还有各种用途，例如制作ICONFONT等，可以深入挖掘。
4.重力陀螺仪
想让页面更有层次感，不妨让设计提供一些碎片元素，例如彩花，星星之类，然后把它们单独切出来放画面前景，使用陀螺仪伴随着手机运动碎片也跟着运动，多么好玩!
这里提供一个工具可以轻松实现陀螺仪重力效果的：parallax.js用法简单，定义一个parallax-obj的父类，把需要动的元素加上layer的类，然后设置动的范围data-depth：
以上就是小编关于怎样通过HTML5让移动APP页面有动效的相关分享，希望对大家有所帮助，想要了解更多HTML5相关内容，还请关注本平台。
