近年来，HTML5应用愈发广泛，并有取代Flash的趋势。很多人知道利用HTML5可以做出好的动作效果，但你知道它是怎么做出来的吗?今天千锋老师就来给大家分享一下HTML5开发培训教程中动效制作的几种方法。

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

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

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

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

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

　　掌握HTML5基础知识，了解动效制作的基本方法，你就可以制作出一个简单的页面。如果你想了解多前端开发方面的知识，如果你想成为企业需要的高端人才，建议你参加千锋HTML5开发培训。千锋HTML5开发培训课程涵盖JavaScript、HTML5、CSS3、Node.JS全栈开发等内容，致力于培养覆盖前端+后台+全栈开发的综合性人才。课程学习门槛低，适合小白迅速成长，学习曲线先快后慢，也适合有一定基础的学员进阶学习，是小白转行、职业技能升级的选择!