如何使用 CSS 为 SVG 制作动画：示例教程

8 分钟阅读

编者注：本文最后更新于 2022 年 7 月 12 日，以包含更多示例。

Web 动画是一种乐趣，它通过提供视觉反馈、引导用户完成任务以及使网站整体变得活跃来改善用户体验。有几种方法可以创建网络动画，包括使用 JavaScript 库、GIF、嵌入式视频和 CSS。

与庞大的 gif 和视频相比，使用 SVG 和 CSS 添加到网站的动画具有更快的加载时间。您还可以制作简单的动画，而无需将另一个 JavaScript 库添加到您网站的页面加载中。

在本文中，我们将学习如何使用带有 CSS 的 SVG 创建轻量级、可扩展的动画。虽然我们将使用 Sass 进行演示，但 CSS 也可以使用。让我们开始吧！

• 使用 CSS 为 SVG 设置动画的常见用例

  • 图标

  • 插图

• 如何为动画准备 SVG

  • 优化 SVG 代码

  • 创建有意分组

  • 注意堆叠顺序

  • 将 SVG 样式设置为首选的初始状态

• 将 CSS 应用于 SVG

• 你可以用 CSS 制作什么动画？

  • 旋转装载机

  • 萨斯

  • HTML

  • 画线动画

  • 动画插图

  • 汉堡菜单

  • 淡入淡出文本

  • 波浪形 SVG 文本

• 用于动画 SVG 的其他工具

使用 CSS 为 SVG 设置动画的常见用例

在我们进入代码之前，让我们回顾一下使用动画 SVG 的一些实用方法。

图标

动画 SVG 非常适合用于指示微交互和状态变化的图标。在引导用户进行下一步操作时，它们也很有帮助，例如在入职导览中。常见用例包括加载、上传、菜单切换以及播放和暂停视频。

插图

插图是另一个常见的用例。它们可以作为空白状态包含在产品中，演示如何在仪表板上生成数据。其他流行的用例包括动画表情符号和贴纸。还有动画现场插图，有助于照亮登录页面。

如何为动画准备 SVG

因为从简化的 SVG 代码开始更容易，所以动画 SVG 的第一部分是准备它们。您可以按照以下步骤进行操作：

优化 SVG 代码

创建 SVG 时，它通常有一些额外的、不必要的代码，因此优化它很重要。您可以使用SVGOMG之类的工具来减小文件大小并删除任何不必要的标签和元数据。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

创建有意分组

如果需要，您可以通过在代码编辑器中打开 SVG 并记下<g>用于对 SVG 元素进行分组的元素来创建有意的分组。如果您想将一组元素动画在一起，请将它们包装起来<g></g>并用类或 ID 命名它们。

如果我们想以相同的方式设置多个路径的样式，我们还可以考虑将 ID 名称转换为类名称。

注意堆叠顺序

这似乎违反直觉，但最后列出的形状将粘贴在上述形状上。如果我们想让一个形状出现在背景中，我们必须确保它列在 SVG 代码的顶部。SVG 形状按从上到下的顺序绘制。

将 SVG 样式设置为首选的初始状态

SVG具有类似于 CSS 样式但直接在 SVG 上设置的表示属性。一个常见的例子是fill颜色。由于这些样式是在 SVG 上设置的，您可能会认为它们在浏览器中占有很大的比重。事实证明，我们在外部设置的任何 CSS 或 Sass 都会自然地覆盖 SVG 样式，而无需!important声明。

但是，请注意 SVG 上的设置，以便为页面加载期间显示的内容做好准备。