近年来，HTML5应用愈发广泛，并有取代Flash的趋势。很多人知道利用HTML5可以做出好的动作效果，但你知道它是怎么做出来的吗？

 

　　1、逐帧动画。逐帧动画即是利用一张等间距的动画分解逐帧图片，由js脚本模拟编写或是使用c++ss3新属性step（）制作而成。逐帧动画脚本可以控制逐帧动画的快慢和动作的暂停，后期可以通过代码进行动画速率及透明度的修改。

 

　　2、GIF。GIF图片擅长于制作细节的小动画、位图，优势在于 “体型”很小，可压缩，制作成本低，以图片的形态适用于各种操作系统，无兼容性的后顾之忧。GIF动画常在H5动效里当担loading导航条，热门小标签等元素。

 

　　3、SVG。SVG擅长于线条的动画，弊端是：IE8,Android4.2及以下支持不好。一张SVG图，其实是由一堆的定位锚点连线生成的，所以它可以很方便的存为文档格式。

 

　　4、c++anvas。c++anvas是HTML5 的新元素 ，类似画板，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。Canvas本身是没有绘图能力的，所有的绘制工作必须依赖 JavaScript 完成。

 

　　5、CSS3。CSS3擅长于平面层的动画，缺陷在于它的部分属性还没有被浏览器有好的支持。CSS3的动画三大属性：Transform 变形，TransITion 过渡，和Animation 动画。