SVG和CSS3动画之间的差异和相似之处？

Question

Sencha Animator专门使用CSS3动画。

RaphaelJS正在使用SVG动画。

我想知道SVG和CSS3动画之间有什么相同点和不同点？

可以使用一个而不是另一个，还是用于差异任务？

Answer 1

确定。我用an introduction to CSS Animations and A little on SVG.

进行了整个演示

但这里有过于简单的要点：

• CSS动画规范（本身）只是为您提供声明“关键帧”或样式之间的多步转换。
• CSS3中的“样式”包括“变换”，它指定页面元素的缩放，旋转，倾斜和位置偏移。
• 可以在样式之间进行“转换”，并指定转换的时间和速度，甚至可以指定立方贝塞尔定时函数。
• 结合动画，过渡和变换为您提供了一种简单，声明的方式，以非常丰富的方式移动和转换任何页面元素（img，div，视频等），在旧版浏览器中也会逐渐降级（只要你对事情有所了解）。

但是出于动画的目的，每个元素基本上被视为一个无差别的2d矩形，因此它实际上是关于动画精灵的。正如你所指出的那样，在Sencha，我们甚至围绕这个构建了一个整体CSS Animation tool。你应该看看那里的一些演示，因为它表明你可以用CSS给你的一小部分原语做很多事情。

可以使用built in SVG animation capabilities（动画，动画元素等），SMIL（类似于CSS动画的声明性动画描述）或JavaScript来执行SVG动画，具有比CSS更丰富的功能集动画，但仅仅因为您正在创建SVG对象并更改其属性。例如，您无法使用SVG“动画”为现有的HTML动画制作动画。

但它也更丰富。 SVG的最大收获是你要声明绘图路径和填充具有很大的灵活性（线条，弧线，二次圆弧，三次贝塞尔曲线等等），你可以使用变换和关键样条曲线随时间改变这些属性的值（类似于CSS Transitions中的计时功能））这允许您执行“卡通”动画而不是精灵动画。 （我不是动画师，我只是使用我认为合适的术语）。因此你可以实际绘制像this cat walking across the screen这样的东西，使用无法用CSS动画执行的线动画（或者对于合理理智的人来说不可能执行 - 如果疯狂的人想要声明具有边界半径的大量零高度div并使用转换为模拟弧线，然后它是一个自由国家。）

另一方面，SVG是一个PITA，如果你是独立编写的（使用XHTML dtd的详细XML样式）。如果你是一个JavaScripter，我强烈推荐Raphael（这是我们实验室项目的一部分） - Raphael具有降低旧版IE中VML矢量图形的好处。 SMIL（SVG的声明性动画）是一个不错的主意，但在很多地方都没有得到适当的支持。此外，许多浏览器不能正确支持SVG，而且那些浏览器通常不完全支持SVG，特别是当您尝试为属性设置动画时。

Android 2.x中没有SVG支持，因此如果您想要在手机上运行的网络动画，那么您将无法使用CSS动画。

在自学了SVG动画的基础知识以便开发顶部链接的介绍演示文稿之后，我可以大胆地用手写SVG。这很难记住，它是非直观的，因为它的XML，它往往完全工作或完全失败，使得调试令人沮丧。

Answer 2

他们完全不同。

SVG 是矢量图像格式。它用于使用路径和基本形状创建无限分辨率图像：

---

然而，

CSS3动画只是网络浏览器平滑插补CSS属性，如color，padding，font-size等。正如您所看到的， CSS3的动画范围非常有限。