我至今没想到，我也能在 CSS 中实现 SVG 动画了
动画是网络中不可或缺的一部分。与互联网早期使用 GIF 图像不同，现在的动画更加细腻和高雅。设计师和前端开发者利用动画使网站看起来更加精致，不仅提升用户体验，还吸引用户关注重要的元素，以传达信息。
本篇文章我们就来一起学习学习如何在 CSS 中实现 SVG 动画。
开篇：CSS 与 SVG 相关核心概念
在实践动画之前，你需要了解 svg 的内部工作原理。SVG 与 HTML 类似，我们可以使用 XML语法定义 SVG 元素，并使用 CSS 对它们进行样式上的设置，你把它们当做是 HTML 一样就行。
不过，与 HTML 不同的是，SVG 元素专门用于绘制图形。例如，我们可以使用
SVG 元素的完整列表甚至包括
而元素可用的属性取决于元素本身。例如 r 属性。
同时需要注意一点：虽然大多数HTML元素可以有子元素，但大多数 SVG 元素不能有子元素。group 元素
HTML 和 SVG 之间的另一个重要区别是我们如何定位元素，特别是通过给定的外部 < SVG > 元素的 viewBox 属性。
这个属性取值由四个数字组成，分别是:min-x、min-y、width和height，中间用空格或逗号分隔。它们一起指定了我们希望浏览器呈现多少 SVG 图形。同时该区域将根据 元素的宽度和高度属性进行缩放，以适应视口的边界。
不过， 视口 viewport 的宽度和高度属性的比例可能确实不同于 viewBox 属性的宽度和高度部分的比例。
默认情况下，SVG 画布的长宽比将被保留，代价是 viewBox 比指定的要大，从而导致viewport 内呈现的字体更小。但是你可以通过 preserveAspectRatio 属性指定不同的行为。它能使我们能够独立绘制图像，并且无论上下文或渲染大小如何，所有元素都将正确定位。
下面我们一起来感受一下。
基础示例
CSS 的 transition 属性允许我们定义属性变化的速率和持续时间。
transition: margin-right 4s ease-in-out 1s; /* property name | duration | easing function | delay */
例如，下面这个例子，当你用鼠标悬停在 SVG 圆圈上时，它的颜色会发生变化，而不是立即从起始值跳到结束值。
jcode
<svg viewBox="0 0 300 200">
<circle cx="150" cy="100" r="60" class="spot" />
svg>
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
svg {
max-width: 50vw;
max-height: 80vh;
}
.spot {
fill: #204ecf;
transition: fill 0.5s;
}
.spot:hover {
fill: #03cc83;
}
我们可以为多个CSS属性定义过渡，每个属性都可以有单独的过渡值。然而，这种方法有两个明显的限制。
第一个限制是，当属性值发生变化时，会自动触发转换。这在某些场景下是不方便的。例如，我们不能有一个无限循环的动画。
第二个限制是转换总是有两个步骤:初始状态和最终状态。我们可以延长动画的持续时间，但不能添加不同的关键帧。
于是，这就催生了一个更强大的概念: CSS animation。使用 CSS animation，我们可以有多个关键帧和一个无限循环。例如下面这个例子：
jcode
<svg viewBox="0 0 300 200">
<rect width="100%" height="100%" class="background" />
<g class="cross">
<line x1="130" y1="80" x2="170" y2="120" />
<line x1="130" y1="120" x2="170" y2="80" />
g>
svg>
@keyframes move-around {
0% {
transform: translate(-40%, -35%);
}
25% {
transform: translate(40%, -35%);
}
50% {
transform: translate(40%, 35%);
}
75% {
transform: translate(-40%, 35%);
}
100% {
transform: translate(-40%, -35%);
}
}
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
svg {
max-width: 50vw;
max-height: 80vh;
}
.background {
fill: #03cc83;
}
.cross {
animation: move-around 5s infinite;
stroke: #262d3d;
stroke-width: 10px;
}
要在多个关键帧上使用 animation 属性，我们需要使用 @keyframes 规则来定义关键帧。关键帧的时间是用相对单位(百分比)来定义的。每个关键帧描述一个或多个 CSS 属性在那个时间点的值。CSS animation 将确保关键帧之间的平滑过渡。
我们使用 animation 属性将具有描述的关键帧的动画应用到所需的元素上。与 transition属性类似，它接受一个持续时间、一个缓和函数和一个延迟。
唯一的区别是第一个参数是我们的 @keyframes 称，而不是属性名称:
/* @keyframes name | duration | easing-function | delay */ animation: my-sliding-animation 3s linear 1s;
示例：为汉堡菜单添加切换动画
现在我们对svg动画的工作原理有了基本的了解。我们可以开始构建一个菜单切换的动画：
jcode
我们发现这个菜单能够巧妙地吸引了用户的注意力，告诉用户可以使用图标关闭菜单。
接下来我们来一起解析具体的代码。
首先我们创建一个 svg 元素，用于创建“汉堡”菜单图形：
<svg class="hamburger">
<line x1="0" y1="50%" x2="100%" y2="50%" class="hamburger__bar hamburger__bar--top" />
<line x1="0" y1="50%" x2="100%" y2="50%" class="hamburger__bar hamburger__bar--mid" />
<line x1="0" y1="50%" x2="100%" y2="50%" class="hamburger__bar hamburger__bar--bot" />
svg>
代码中，每行有两组属性。其中，x1 和 y1 代表直线的起点坐标，而 x2 和 y2 代表直线的终点坐标。你会发现我使用相对单位 % 来设置位置，这是一种确保图像内容调整大小以适应包含 SVG 元素的简单方法。虽然这种方法在这种情况下有效，但有一个很大的缺点:
我们无法维护以这种方式定位的元素的长宽比。为此，我们必须使用元素的 viewBox 属性。
注意，我们对 SVG 元素应用了 CSS 类，应用了一些基本样式。
在这个样式中，我们设置了 元素的大小，并更改光标类型以表明它是可单击的。但是要设置线条的颜色和粗细，我们将使用 stroke和stroke-width 属性。
.hamburger {
width: 62px;
height: 62px;
cursor: pointer;
}
.hamburger__bar {
stroke: white;
stroke-width: 10%;
}
如果我们现在渲染，我们会看到所有三条线都有相同的大小和位置，彼此完全重叠。不幸的是，我们不能通过 CSS 独立地改变开始和结束的位置。但是我们可以使用 CSS transform 属性移动整个元素的顶部和底部的条:
.hamburger__bar--top {
transform: translateY(-40%);
}
.hamburger__bar--bot {
transform: translateY(40%);
}
通过移动 Y 轴上的条，我们最终得到了一个看起来不错的汉堡菜单图形。
现在继续编写菜单的第二个状态: 关闭按钮。
我们将依赖于应用于SVG元素的 .is-opened 类来在这两种状态之间切换。为了使结果更易于访问，让我们将SVG包装在 元素中，并处理该级别上的单击。
添加和删除 .is-opened 类的过程将由一个简单的 JavaScript 处理:
const hamburger = document.querySelector("button");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("is-opened");
});
为了创建 X 图形，我们可以对每一条 line 应用不同的变换属性。因为新的变换属性将覆盖旧的。
从那里，我们可以将顶部杆绕其中心顺时针旋转 45 度，并将底部杆 逆时针旋转 45 度 。我们可以水平缩小中间条，直到它足够窄，让它隐藏在 X 的中心后面:
.is-opened .hamburger__bar--top {
transform: rotate(45deg);// 顺时针旋转 `45` 度
}
.is-opened .hamburger__bar--mid {
transform: scaleX(0.1); // 水平缩小中间条
}
.is-opened .hamburger__bar--bot {
transform: rotate(-45deg); // 逆时针旋转 45 度
}
默认情况下，SVG 元素的 transform-origin 属性通常为 0,0。这意味着我们的条将围绕视口的左上角旋转，但我们希望它们围绕中心旋转。为了解决这个问题，让我们将.hamburger__bar类的transform-origin属性设置为 center。
transition 属性
transition 属性告诉浏览器在两种不同状态的 CSS 属性之间平滑过渡。这里，我们想把我们对 transform 属性的改变做成动画，它能决定了条形条的位置、方向和比例。
我们还可以使用 transition-duration 属性控制转换的持续时间。为了使动画和最终的SVG 转换看起来更简洁，我们将设置0.3秒的持续时间:
.hamburger__bar {
transition-property: transform;
transition-duration: 0.3s;
...
我们唯一需要的JavaScript代码就是使图标状态变成可切换的:
const hamburger = document.querySelector("button");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("is-opened");
});
这里，我们使用 querySelector() 通过 .mute 类选择外部 SVG 元素。然后，我们添加一个单击事件侦听器。当触发 click 事件时，我们只在 本身上切换 .is-active 类，而不是在层次结构中更深入地切换。因为我们让CSS动画只应用于带有.is-active类的元素，所以切换这个类会激活和关闭动画。
最后，我们将HTML主体转换为一个 Flex 容器，这将帮助我们在水平和垂直方向上居中图标:
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #222;
height: 100vh;
}
这样，我们就使用一些基本的 CSS 和一个简短的 JavaScript 片段构建了一个功能齐全的动画按钮。
使用来自矢量图形编辑器的 SVG 数据
前面我们一起实现的汉堡菜单非常简单。但是如果我们想做更复杂的东西呢?
这就是 SVG 变得困难的地方，这个时候需要借助矢量图形编辑软件。
我们的第二个 SVG 动画是一个显示耳机图标的静音按钮。当音乐激活时，图标会跳动和跳舞;静音后，图标会被划掉:
jcode
<svg class="mute is-active" viewBox="0 0 100 100">
<g class="mute__headphones">
<path d="M92.6,50.075C92.213,26.775 73.25,7.938 50,7.938C26.75,7.938 7.775,26.775 7.388,50.075C3.112,51.363 -0.013,55.425 -0.013,60.25L-0.013,72.7C-0.013,78.55 4.575,83.3 10.238,83.3L18.363,83.3L18.363,51.6C18.4,51.338 18.438,51.075 18.438,50.813C18.438,33.275 32.6,19 50,19C67.4,19 81.563,33.275 81.563,50.813C81.563,51.088 81.6,51.338 81.638,51.6L81.638,83.313L89.763,83.313C95.413,83.313 100.013,78.563 100.013,72.713L100.013,60.263C100,55.438 96.875,51.362 92.6,50.075Z" />
<path d="M70.538,54.088L70.538,79.588C70.538,81.625 72.188,83.275 74.225,83.275L74.225,83.325L78.662,83.325L78.662,50.4L74.225,50.4C72.213,50.4 70.538,52.063 70.538,54.088Z" />
<path d="M25.75,50.4L21.313,50.4L21.313,83.325L25.75,83.325L25.75,83.275C27.788,83.275 29.438,81.625 29.438,79.588L29.438,54.088C29.45,52.063 27.775,50.4 25.75,50.4Z" />
g>
<line x1="12" y1="12" x2="88" y2="88" class="mute__strikethrough" />
svg>
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #222;
height: 100vh;
}
.mute {
fill: white;
width: 170px;
height: 70px;
cursor: pointer;
}
.mute__headphones {
transform-origin: center;
transform: scale(0.9);
}
.is-active .mute__headphones {
animation: pulse 2s infinite;
}
.mute__strikethrough {
stroke: red;
opacity: 0.8;
stroke-width: 12px;
}
.is-active .mute__strikethrough {
opacity: 0;
}
@keyframes pulse {
0% {
transform: scale(0.9);
}
40% {
transform: scale(1) rotate(5deg);
}
80% {
transform: scale(1) rotate(-5deg);
}
100% {
transform: scale(0.9) rotate(0);
}
}
const muteButton = document.querySelector(".mute");
muteButton.addEventListener("click", () => {
muteButton.classList.toggle("is-active");
});
在 svg 元素中，我们使用了来自矢量图形编辑软件的图形信息对耳机进行了绘制。
不过，在矢量图像编辑软件中创建的 SVG 图标不太可能使用相对单位。无论包含图标的SVG 元素的宽高比如何，我们都希望确保图标的宽高比得到维护。因此，为了使这种级别的控制成为可能，我们将使用 viewBox 属性。
在本例中，我将其转换为 100 x 100 像素的 viewBox。
让我们确保图标居中并且大小合适。我们将静音类应用到基本SVG元素，然后添加以下CSS样式:
.mute {
fill: white;
width: 80px;
height: 70px;
cursor: pointer;
}
SVG 动画的起点
接着上面一节，现在整洁的 SVG 包含一个
path 元素允许我们绘制直线、曲线和圆弧。路径用一系列命令来描述，这些命令描述了应该如何绘制形状。由于我们的图标由三个互不相连的形状组成，我们有三条路径来描述它们。
同时在三条路径上应用脉动和舞蹈转换，而不是用 CSS 分别为 SVG 路径添加动画。
<svg class="mute" viewBox="0 0 100 100">
<g>
<path d="M92.6,50.075C92.213,26.775 73.25,7.938 50,7.938C26.75,7.938 7.775,26.775 7.388,50.075C3.112,51.363 -0.013,55.425 -0.013,60.25L-0.013,72.7C-0.013,78.55 4.575,83.3 10.238,83.3L18.363,83.3L18.363,51.6C18.4,51.338 18.438,51.075 18.438,50.813C18.438,33.275 32.6,19 50,19C67.4,19 81.563,33.275 81.563,50.813C81.563,51.088 81.6,51.338 81.638,51.6L81.638,83.313L89.763,83.313C95.413,83.313 100.013,78.563 100.013,72.713L100.013,60.263C100,55.438 96.875,51.362 92.6,50.075Z" />
<path d="M70.538,54.088L70.538,79.588C70.538,81.625 72.188,83.275 74.225,83.275L74.225,83.325L78.662,83.325L78.662,50.4L74.225,50.4C72.213,50.4 70.538,52.063 70.538,54.088Z" />
<path d="M25.75,50.4L21.313,50.4L21.313,83.325L25.75,83.325L25.75,83.275C27.788,83.275 29.438,81.625 29.438,79.588L29.438,54.088C29.45,52.063 27.775,50.4 25.75,50.4Z" />
g>
svg>
为了让耳机跳动和跳舞，过渡是不够的，需要使用到关键帧动画。
在这种情况下，我们的开始和结束关键帧(分别为0%和100%)使用略微缩小的耳机图标。
于是，对于动画的前40%，我们将图像稍微扩大并倾斜 5 度。然后，对于接下来 40% 的动画，我们将其缩小到 0.9x，并将其旋转 5 度到另一边。最后，对于动画的最后 20%，图标转换返回到相同的初始参数，以便顺利循环。具体代码如下：
@keyframes pulse {
0% {
transform: scale(0.9);
}
40% {
transform: scale(1) rotate(5deg);
}
80% {
transform: scale(1) rotate(-5deg);
}
100% {
transform: scale(0.9) rotate(0);
}
}
优化
为了展示关键帧是如何工作的，上面的代码中，我们将关键帧设置得过于冗长。其实有三种方法可以缩短它。
因为我们的 100% 关键帧设置了整个变换列表，如果我们完全忽略 rotate()，它的值将默认为 0:
100% {
transform: scale(0.9);
}
其次，因为循环动画是循环的，因此 0% 和 100% 的关键帧是匹配的。于是，可以使用相同的 CSS 规则定义它们:
0%, 100% {
transform: scale(0.9);
}
最后，我们将很快应用 transform: scale(0.9); 到 mute__headphones类，当我们这样做时，我们根本不需要定义开始和结束关键帧!它们将默认为mute__headphones使用的静态样式。
现在我们已经定义了动画关键帧，我们可以应用动画了。我们将.mute__headphones类添加到
首先，我们再次将 transform-origin 设置为 center，因为我们希望图标围绕其中心旋转。
接着，我们在只有当 .is-active 父类存在时，使用 animation 属性应用动画。
.mute__headphones {
transform-origin: center;
transform: scale(0.9);
}
.is-active .mute__headphones {
animation: pulse 2s infinite;
}
同时，我们在状态之间切换所需的JavaScript也遵循与汉堡菜单相同的方式:
const muteButton = document.querySelector(".mute");
muteButton.addEventListener("click", () => {
muteButton.classList.toggle("is-active");
});
最后一部分，我们将添加的是当图标处于非 active 状态时出现的划线。由于这是一个简单的svg 元素，我们可以手动绘制它。我们知道画布的边缘是 0 和 100，所以很容易计算出线的开始和结束位置:
<line x1="12" y1="12" x2="88" y2="88" class="mute__strikethrough" />
因为我们将一个类直接应用于划线
.mute__strikethrough {
stroke: red;
opacity: 0.8;
stroke-width: 12px;
}
.is-active .mute__strikethrough {
opacity: 0;
}
我们还可以将.is-active类直接添加到 SVG 中。这将使动画在页面加载时立即开始。
现在我们终于完成了这个动画过程。
结尾
目前，我们只接触 CSS 动画的皮毛，例如知道了如何手工绘制 SVG 代码以实现简单的动画。但知道如何以及何时使用外部矢量编辑器创建的图形也很重要。同时，对于复杂的动画场景，开发者可以去探索一下像 GSAP 或 animejs 这样的动画库实现更复杂的动画。
本次的文章就写到这里，关注我，下篇见。