8 分钟阅读

编者注：本文最后更新于 年 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 上的设置，以便为页面加载期间显示的内容做好准备。例如，加载缓慢的页面会在应用 CSS 样式之前显示 SVG 的闪烁。我建议您保留宽度和高度以避免这种情况；Sara Soueidan在她关于该主题的博客文章中很好地解释了无样式 SVG 的闪光。

将 CSS 应用于 SVG

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

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

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

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

我们可以在标签中添加 CSS 样式<style>，嵌套在<svg>标签中：

​

如果您想保留 SVG 中引用的样式，但实际上不将其包含在 SVG 中，您可以使用该<?xml-stylesheet>标记从 SVG 链接到外部样式表：

​小小播放器()，免费追剧神器支持双端，影视资源极速解析！

也可以使用内联样式属性在元素上设置 CSS

来自 LogRocket 的更多精彩文章：

不要错过来自 LogRocket 的精选时事通讯The Replay

使用 React 的 useEffect优化应用程序的性能

在多个 Node 版本之间切换

了解如何使用 AnimXYZ 为您的 React 应用程序制作动画

探索 Tauri，一个用于构建二进制文件的新框架

比较NestJS 与 Express.js

发现TypeScript 领域中使用的流行 ORM

​

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

你可以用 CSS 为很多东西制作动画。一方面，您可以使用 CSS 动画或 CSS 过渡，使用可以随时间变化的值来为 CSS 属性设置动画。有关这些属性的完整列表，请查看 MDN Web 文档以获取可动画 CSS 属性的列表。为了激发一些灵感，让我们回顾一些演示。

我们将介绍两种主要类型的动画，它们的不同之处在于它们提供的控制量。

旋转装载机

我们将创建的第一个 SVG 动画是一个旋转加载器，就像我们通常在应用程序的加载屏幕上看到的那样。我们首先设置 SVG，这是一个带有深色象限的环。

我们给 SVG 一个 ID loading-spinner，然后定义动画和过渡。动画引用 的名称@keyframes，其中transform: rotate设置为从0度数到360度数，一个完整的旋转。这就是让这个微调器栩栩如生的全部！

#加载中动画：loading-spinner 1s 线性无限​@keyframes 加载微调器从变换：旋转（0度）至变换：旋转（360度）

萨斯

想要更顺畅的东西吗？SVG 支持渐变，因此您可以使用相同的 Sass 实现更平滑的效果，但使用对圆环应用渐变的 SVG，其定义#spinner-gradient-a如下：

​

​

现在，让我们transform: scale尝试创建这个变形条加载图标。

​

​

SVG 由三个等距的大小相等的矩形组成。SVG 和所有三个元素的每个元素都添加了 ID <rect>，因此可以轻松地使用 Sass 定位它们。

HTML

Sass 将动画应用于每个条。关键帧告诉条形图在时间轴的四个位置沿 Y 轴改变比例：开始时，四分之一处，中途，然后四分之三处。

动画中的第一个数字表示动画长度，而第二个数字设置延迟。由于我希望这些条在不同时间改变大小，因此我为每个条添加了不同的延迟：

#加载栏＆-剩下动画：loading-bar-morph 1s 线性 .1s 无限变换原点：中心＆-中间动画：loading-bar-morph 1s 线性 .2s 无限变换原点：中心＆-正确的动画：loading-bar-morph 1s 线性 .4s 无限变换原点：中心​@keyframes loading-bar-morph0%变换：scaleY(1)25%变换：scaleY(0.3)50%变换：scaleY(0.7)75%变换：scaleY(0.15)

请注意，它transform-origin: center告诉变换从条形的中心进行缩放；否则，它会从上向下缩放，看起来好像钢筋正在钻入地下。测试一下，你就会明白我的意思了。

默认情况下，SVG 位于(0, 0)左上角的点。如果您习惯使用 HTML 元素，这是一个关键的区别，其默认的 transform-origin 总是在(50%, 50%).

画线动画

我们可以添加一个画线效果来使 SVG 看起来好像它正在被绘制。由于它依赖于笔画，因此它需要一个带有线条的 SVG。我将引导您完成如何为单行完成，然后您将知道如何完成其余部分。

首先，使用 对线条应用虚线stroke-dasharray。数字表示虚线的长度（以像素为单位）。你会希望它是线的长度：

＃线中风破折号：497

然后，添加stroke-dashoffset以沿线重新定位破折号。使其与线本身一样长，使其看起来像一条实线。这是动画最后一帧的样子：

＃线中风破折号：497冲程-dashoffset：497

现在，它已准备好制作动画了。让我们添加动画的关键帧，stroke-dashoffset使其从没有可见笔划的完整偏移变为0px偏移，即实心笔划。注意forwards动画属性中的 。

这是一个animation-fill-mode告诉动画在播放后保持在其最终结束状态的方法。没有它，动画将返回到它的第一帧作为它的最终休息点：

＃线中风破折号：497冲程-dashoffset：497动画：向前绘制 1400 毫秒缓进出 4 毫秒​@keyframes 绘制从冲程-dashoffset：1000至中风-dashoffset: 0

动画插图

让我们使用Animista的心跳动画来演示动画插图以产生脉冲效果。Animista 是一个很好的预制 CSS 动画效果资源，您可以重复使用和迭代。

对于这个跳动的心脏，悬停时会触发一些动画。心脏有 110% 的比例变化，眼睛变小，嘴巴变大，脸红，心脏跳动：

#笑脸爱#笑脸＆-脸红显示：无一个显示：内联块＆：徘徊#笑脸变换：比例（1.1）变换原点：中心-webkit-animation: heartbeat 1.5s ease-in-out infinite both动画：心跳1.5s缓进出无限都＆-脸红显示：继承&-左眼变换原点：中心变换：缩放（.7）平移（-8px）&-右眼变换原点：中心变换：缩放（.7）平移（8px）＆-嘴变换：translateY（-22px）比例（1.6）变换原点：中心​/* ----------------------------------------------* 动画心跳* 由 Animista 于 -3-24 18:51:13 生成* w：，t：@cssanimista* ---------------------------------------------- */​@-webkit-keyframes 心跳从-webkit-transform：缩放（1）变换：比例（1）-webkit-transform-origin：中心中心变换原点：中心中心-webkit-animation-timing-function：缓出动画定时功能：缓出10%-webkit 转换：比例（0.91）变换：比例（0.91）-webkit-animation-timing-function：缓入动画定时功能：缓入17%-webkit-transform：规模（0.98）变换：比例（0.98）-webkit-animation-timing-function：缓出动画定时功能：缓出33%-webkit-transform：规模（0.87）变换：比例（0.87）-webkit-animation-timing-function：缓入动画定时功能：缓入45%-webkit-transform：缩放（1）变换：比例（1）-webkit-animation-timing-function：缓出动画定时功能：缓出@keyframes 心跳从-webkit-transform：缩放（1）变换：比例（1）-webkit-transform-origin：中心中心变换原点：中心中心-webkit-animation-timing-function：缓出动画定时功能：缓出10%-webkit 转换：比例（0.91）变换：比例（0.91）-webkit-animation-timing-function：缓入动画定时功能：缓入17%-webkit-transform：规模（0.98）变换：比例（0.98）-webkit-animation-timing-function：缓出动画定时功能：缓出33%-webkit-transform：规模（0.87）变换：比例（0.87）-webkit-animation-timing-function：缓入动画定时功能：缓入45%-webkit-transform：缩放（1）变换：比例（1）-webkit-animation-timing-function：缓出动画定时功能：缓出

让我们再做一个；在这个例子中，我通过改变它们的位置，使用transform: translate. 为了让它们消失，我为opacity. 现在看来，这是一个炎热的夏日！

​

汉堡菜单

让我们使用 SVG 创建一个汉堡菜单；当用户将鼠标悬停在菜单上时将触发动画：

让我们分解上面的代码。首先，我们使用该元素设置一个汉堡包 SVG，rect并绘制三个矩形。我们分别给出了、和三个rect元素类。topmiddlebottom

动画的核心发生在悬停时。当用户悬停时，我们会改变矩形的位置并将top和bottom矩形分别旋转 45% 和 -45%。我们还将middle矩形的不透明度设置为0。

淡入淡出文本

另一个很酷的动画是淡入淡出文本动画：

text`在这里，我们使用元素设置了一个基于文本的 SVG ，定义了一个动画，它将在和`fadeIn`之间切换文本的不透明度，并将动画应用于 SVG。`0``1``fadeIn

波浪形 SVG 文本

最后的演示是一个波浪文本动画，其中世界上的每个字母都会上下移动，看起来就像波浪的运动。我们也可以称这个动画为有弹性的文本动画。

对于 SVG，我们使用text元素来定义单词 wavy 的每个字母。3px我们用将字母向下推translateY。稍后，我们将使它作为波动的一部分弹出。为了完成效果，我们定义了一个名为 的动画wavyText，并且我们延迟了每个字母的动画，以便它们一个接一个地弹出。

用于动画 SVG 的其他工具

虽然我们可以使用 CSS 为 SVG 制作动画，但我们还可以使用其他工具来处理和创建动画。SVG 动画可能会有点复杂，但是以下工具使我们可以非常简单地制作 SVG 动画。

SVGator

快照.svg

SVG.js

VivusJS

mo.js

GSAP

动画.CSS

成帧器运动

结论

既然您已经了解了几种使用 CSS 为 SVG 制作动画的不同方法，我希望您受到启发，为 Web 创建自己的动画！只需几行 CSS，就可以将静态 SVG 带入生活，这很有趣。

一旦掌握了一些技巧，处理更复杂的动画就会更容易。在线和CodePen等网站上有无穷无尽的灵感。快乐的动画！

您的前端是否占用了用户的 CPU？

随着 Web 前端变得越来越复杂，资源贪婪的功能对浏览器的要求也越来越高。如果您对监控和跟踪生产环境中所有用户的客户端 CPU 使用情况、内存使用情况等感兴趣，请尝试使用 LogRocket。

LogRocket就像一个用于 Web 和移动应用程序的 DVR，记录您的 Web 应用程序或网站中发生的一切。无需猜测问题发生的原因，您可以汇总和报告关键前端性能指标、重放用户会话以及应用程序状态、记录网络请求并自动显示所有错误