如何使用 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 并记下用于对 SVG 元素进行分组的元素来创建有意的分组。如果您想将一组元素动画在一起,请将它们包装起来并用类或 ID 命名它们。

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

注意堆叠顺序

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

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

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

但是,请注意 SVG 上的设置,以便为页面加载期间显示的内容做好准备。例如,加载缓慢的页面会在应用 CSS 样式之前显示 SVG 的闪烁。我建议您保留宽度和高度以避免这种情况;Sara Soueidan在她关于该主题的博客文章中很好地解释了无样式 SVG 的闪光。

将 CSS 应用于 SVG

现在我们已经整理了 SVG,让我们探索一些添加 CSS 的选项。

在将 CSS 应用于 SVG 时,有一些注意事项。一个限制是我们不能使用外部样式表将样式应用于外部链接的 SVG。

在 HTML 中嵌入 SVG 代码使 SVG 元素及其内容成为文档 DOM 树的一部分,因此它们会受到文档 CSS 的影响。这种方法是我最喜欢的,因为它使样式与标记分开。

在查看下面的其他选项时,我们会看到它们都交织在一起。如果您使用的是 Rails,有一些 gem 可以自动将 SVG 嵌入到视图中。因此,在您的代码中,您可以简单地引用外部 SVG,然后在编译时将其嵌入。这种方法的另一个好处是内联 SVG 意味着减少了一个 HTTP 请求,从而提高了性能:

我们可以在标签中添加 CSS 样式