合理的动效设计能够带给用户良好的体验，一个H5运营宣传页，离不开酷炫的动效设计。动效设计可谓是网页设计师最需要掌握的技能之一了，达内ui设计培训专家总结了八种 HTML5 动效设计手法，由浅入深的帮助大家提升网页设计能力。
1：GIF
GIF图片擅长于制作细节的小动画，位图，体型小，可压缩，制作成本低，以图片的形态适用于各种操作系统，无兼容性的后顾之忧。我们可以用Photoshop时间轴，或Flash，AE将动画导出存成GIF格式，轻松制作GIF动画。
GIF动画最常在H5动效里当担loading导航条，热门小标签等元素，一般用于制作小细节的动画。
H5页面承载GIF图片的方式是最省成本，最为简便的。
2：逐帧动画
逐帧动画即是利用一张等间距的动画分解逐帧图片，由js脚本模拟编写或是使用css3新属性step()制作而成。step()在移动端的兼容性是很好的，但使用比较小众。逐帧动画和GIF动画的差别在于，脚本可以控制逐帧动画的快慢和动作的暂停，而GIF动画无法在后期通过代码进行动画速率及透明度的修改。
做一个逐帧动画我们需要一张等间距的“动画分解逐帧图片.png”，再通过JavaScript脚本或CSS3 animation的过度函数step() 来控制图片的background-position，快速输出一个逐帧动画。
3：CSS3
CSS3是动画家族里颇有存在感的一名成员。CSS是擅长于平面层的动画。CSS3的缺陷在于其部分属性没有被浏览器良好的支持。
CSS3的动画具有的三大属性：Transform 变形，Transition 过渡，和Animation 动画。
Transform 变形：拥有 rotate 旋转 skew 扭曲 scale 缩放 translate 移动 matrix 矩阵变形五大特效。
Transition 过渡：拥有修改执行变换的属性，时长，速率和延迟时间的能力，贝塞尔曲线就是归属于transition的设定之下的。
Animation 动画：若将Transform解释为动作，Transition解释为过渡，那么Animation则是连续的几个动作，即动画。Animation可以我们设定keyframes的值，让元素在一段时间内完成多个动作。
4：SVG
SVG，也是动效制作中不可忽略的重要方法，SVG是擅长于线条的动画，弊端是：IE8，Android4.2 及以下支持不好。
SVG，是可缩放矢量图形（Scalable Vector Graphics）， 是被存成了 XML 格式的图像，特点是：
可被多种工具读取和修改
尺寸更小，可压缩性更强
矢量
纯粹的 XML
一张SVG图是由一堆的定位锚点连线生成的，因此可以很方便的存为文档格式。而页面中的引用，也是简单的将此文本引入即可。
5：Canvas
HTML5 的新元素 <canvas>，类似画板，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。本身是没有绘图能力的。所有的绘制工作必须依赖 JavaScript 完成。Canvas 是擅长于绘画的动画。
网上所见的多数图表动画，都是由Canvas或是SVG制作而成的，二者类似，但也有不少区别：
canvas是画框，有自己固定的高宽，svg是不依赖分辨率的矢量，可以任意放大缩小。
canvas能以.jpg的格式保存图像，svg是文本的格式保存图像
canvas绘制的图像不占DOM，而svg的每个图像都是1个DOM元素
canvas适合图像密集型的动画，而svg不适合大量使用。
canvas完全依赖脚本绘制作，而svg可直接使用矢量转存生成。
6：Flash->Canvas
Flash转Canvas的方法也是最近非常火爆的方式。通过Flash cc制作复杂又精细的动画，导成Canvas文件，动画中的交互操作，依赖Create.js的脚步库完成。
7：video
用视频输出非常特别的动效。
8：JavaScript
但凡是涉及到交互反馈的动画，小至滚屏翻页，大到重力感应等都需要js进行处理脚步的编写。所有的动画特效都离不开Javascript支持。网上有不少Javascript脚本库，只要加以利用，就可以酷炫的动画效果。
总结：
达内ui设计培训专家表示，网页设计师可以根据不同情况，选用动效设计手法，制作出属于自己的优秀动效设计效果。