随着HTML5的逐步普及，在Web页上实现动画的方式也增加了，但也带来了一些兼容性问题，本文做一个总结。

目前来说，没有一种方式是完美的。

GIF兼容性最好，但是画质差，无交互。

Canvas很火热，功能也强大，编程难度也稍高，旧IE不支持。

SVG擅长处理矢量图形，交互容易，旧IE不支持。

CSS3很闪亮，但功能有限，旧IE不支持。

APNG, SMIL 还需看将来各浏览器的支持进展。

Video也华丽，只是一个视频要准备多种文件格式，令人不爽。

Javascript是个万金油，只要做交互，他还是一员大将。

Flash很强大，但前途暗淡，移动端不給力。

序号名称简述优点缺点适用场景1GIF动画这是最历史悠久的方式了，GIF89a也已经过了专利期限，现在使用没有法律问题了。文件小、工具多、浏览器兼容性好、资源占用少。支持颜色少(最大256色)、Alpha透明度支持差，导致图像锯齿毛边比较严重。适用于颜色少、画面简单的场合2Flash / SilverLight 等通过浏览器plugin来支持特定文件格式的动画。跨浏览器、处理复杂动画无压力需要安装插件、移动设备不支持、占用资源多、易导致浏览器崩溃桌面系统、复杂的动画3Javascript + HTML通过js动态修改DOM节点及属性来实现动画。兼容性好(桌面端、移动端都行)需要搭配CSS,JS,图片等文件，运行效率不高兼容性重要、计算量不大的动画4Javascript + Canvas / WebGL通过Canvas 2D/3D Context来绘图运行效率高、工具支持好、功能够强大、可硬件加速旧IE不支持，现代浏览器支持情况有所差异，交互麻烦可以无视IE678的场合5Javascript + SVG通过js动态修改SVG节点及属性来实现动画。编程简单，绘图容易，功能强大，交互方便旧IE不支持，现代浏览器支持情况有所差异要求矢量图形的场合，且可以无视IE6786SVG+SMIL通过完全的SVG标签式的语言来编写动画编程简单，无需JS旧IE不支持，现代浏览器支持情况也相差巨大，仅Firefox支持较好Firefox7APNG比GIF动画更先进的动画图像文件格式，支持真彩色，支持alpha透明画质高、单文件、资源占用少。浏览器支持差，只支持逐帧动画，不能交互Firefox, Opera8CSS3通过CSS直接实现动画效果标准化、资源占用少。旧IE不支持，现代浏览器支持情况有所差异，交互功能弱现代浏览器9Video通过HTML5视频来实现动画标准化、资源占用少。旧IE不支持，现代浏览器支持情况有所差异，交互麻烦现代浏览器

用Video来做动画？没听错，确实有！今天早上打开Bing.com就是的，刚开始以为是CSS3，查看一下发现是个Video.

上面表格看起来还是有些不爽，还是弄一个评分的简单表吧，如下：

序号名称格式桌面端

兼容性移动端

兼容性IE 6/7/8交互效率资源占用1GIF动画二进制非常好非常好支持无高低2Flash / SilverLight 等二进制非常好非常差支持容易高高3Javascript + HTML纯文本非常好非常好支持容易低中4Javascript + Canvas纯文本一般好不支持难高中5Javascript + SVG纯文本一般好不支持容易低中6SVG+SMIL纯文本差非常差不支持容易高中7APNG二进制非常差非常差不支持无高低8CSS3纯文本一般好不支持无高低9Video二进制一般一般不支持难高中

以上仅是个人浅见之中的不完全表达，欢迎指正。

另外，强烈期待Canvas高手、SVG高手与我交流。