CSS，JS，SMIL动画制作优缺点

网页设计师通常会使用CSS，JS，SMIL这三种工具制作动画。但是问题来了，这三种工具到底哪一件工具能够最大程度的展示动画风采呢？当然不可否认，每种工具都有自身的优点和缺点。也正是因为如此，才有必要根据具体的网页设计要求比较这三种工具从而做出有见识的决定。

今天上海网站建设润滋小编根据自身工作经验写一篇关于这三种工具优缺点的文章，希望能够帮助网页设计师理解到底哪种工具是最佳的制作动画的工具。

在开始分析这几个工具前，先了解下SVG。SVG也就是可缩放矢量图形，它是基于XML矢量图片格式制作二维图片的。SVG规格是由W3C制定的公开标准。

现在，我们就分别了解这3种工具

1. CSS

CSS是制作几乎所有动画最好的选择之一。尤其CSS动画比它的同行SMIL动画在移动端可缩放矢量图形效果要好。不过，CSS也有其自身的局限性，尤其是结合SVG一起使用时，CSS不足以驾驭所有的SVG属性。这种情况下，网页设计师别无选择，只能使用SMIL或者JS。

2. SMIL

SMIL即同步多媒体继承语言，是W3C推荐的可拓展标记语言，用来描述多媒体演示。SMIL负责定义标记包括布局，视觉转化，动画，时间多媒体插嵌等。它允许展示各种媒体项目例如文字，图片，视频，音频链接到其他SMIL演示上。SMIL标记使用XML语言编写的。

SMIL动画与JS和CSS比，主要优势在于当SVG以图片形式嵌入时，SMIL动画都会保留。

SMIL可以非常成功的驾驭那些CSS无法驾驭的属性。例如现有路径数据属性。然而， IE任何版本都不支持SMIL。此外，在相同的SMIL元素中使用多个动画有时候会显得笨重，尤其是包含多个转换的时候。

3. JavaScript

如果现有SVG动画库能有效渗入，JS可以实现简易动画。JS有利于帮助设计师更好的管理动画。然而，JS也有一个较为显著的缺点，当SVG以图片形式嵌入时，JS动画也无法实现保存。