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 的其他工具
在我们进入代码之前，让我们回顾一下使用动画 SVG 的一些实用方法。
动画 SVG 非常适合用于指示微交互和状态变化的图标。在引导用户进行下一步操作时，它们也很有帮助，例如在入职导览中。常见用例包括加载、上传、菜单切换以及播放和暂停视频。
插图是另一个常见的用例。它们可以作为空白状态包含在产品中，演示如何在仪表板上生成数据。其他流行的用例包括动画表情符号和贴纸。还有动画现场插图，有助于照亮登录页面。
因为从简化的 SVG 代码开始更容易，所以动画 SVG 的第一部分是准备它们。您可以按照以下步骤进行操作：
创建 SVG 时，它通常有一些额外的、不必要的代码，因此优化它很重要。您可以使用SVGOMG之类的工具来减小文件大小并删除任何不必要的标签和元数据。
超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →
如果需要，您可以通过在代码编辑器中打开 SVG 并记下
如果我们想以相同的方式设置多个路径的样式，我们还可以考虑将 ID 名称转换为类名称。
这似乎违反直觉，但最后列出的形状将粘贴在上述形状上。如果我们想让一个形状出现在背景中，我们必须确保它列在 SVG 代码的顶部。SVG 形状按从上到下的顺序绘制。
SVG具有类似于 CSS 样式但直接在 SVG 上设置的表示属性。一个常见的例子是fill颜色。由于这些样式是在 SVG 上设置的，您可能会认为它们在浏览器中占有很大的比重。事实证明，我们在外部设置的任何 CSS 或 Sass 都会自然地覆盖 SVG 样式，而无需!important声明。
但是，请注意 SVG 上的设置，以便为页面加载期间显示的内容做好准备。