22: 使用 CSS 为 SVG 动画

当您使用内联 SVG 时，所有 SVG 代码都直接位于 HTML 中，因此也在 DOM 中。您可以像对待<div>、<h1>或任何其他 HTML 元素一样对其进行样式设置。CSS 样式带来了动画和过渡的可能性。

一个简单的例子

查看 Chris Coyier 在 CodePen 上的笔 CodePen Logo as Inline SVG（@chriscoyier）。

我写了一篇关于如何处理稍微复杂一点的设计的文章在本教程中。这是该演示。

查看 Chris Coyier 在 CodePen 上的笔 Wufoo SVG Ad（@chriscoyier）。

在这个屏幕录像中，我们为 Wufoo 制作了另一个动画 SVG 广告，几乎从头开始。设计中有一些云，我们对其进行动画处理，使其平滑且无限地移动和重复。

最初，我们使用内联 SVG 并使用附加到同一 HTML 文档的 CSS 对其进行动画处理。但是，只是为了展示它的工作原理，我们将该 CSS移动到SVG 本身中，这完全有效。您可能希望这样做是因为，即使您将 SVG 作为<img>或background-image使用，动画也可以运行。

演示

查看 Chris Coyier 在 CodePen 上的笔 kKdDj（@chriscoyier）。

该动画的浏览器支持会有所不同。在撰写本文时，它仅在 Chrome 中有效。