css - 更改 SVG 动画的方向

Question

我看到了this SVG animation我想知道如何改变线条被删除的方向；目前这条线从最后绘制的点缩回，但我想要相反的方向；使线条从它开始绘制的点开始自行删除(这样它看起来更像是一个加载动画)。

我看到 .path 上的动画属性的值为无限大，但我不确定方向是如何指定的。

HTML 是

<div class="bg">  
<svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0 0 670 236">

  <path class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M343.6 75.9v20.3l23.1 21.8-23.1 21.8v20.3l44.6-42.1zM326.4 139.8l-23.1-21.8 23.1-21.8v-20.3l-44.6 42.1 44.6 42.1z"/>

  <path class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M335 38.9c-43.7 0-79.1 35.4-79.1 79.1s35.4 79.1 79.1 79.1 79.1-35.4 79.1-79.1-35.4-79.1-79.1-79.1zM335 182.9c-35.8 0-64.9-29.1-64.9-64.9s29.1-64.9 64.9-64.9 64.9 29.1 64.9 64.9-29.1 64.9-64.9 64.9z"/>

  </svg>
</div>

CSS 是

body {
  background-color: #fff;
}

.bg  {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.path {
  animation: draw 3.5s infinite;
}

 @keyframes draw {
  50% {
    stroke-dashoffset: 0;
  }
}

Answer 1

我喜欢你制作加载动画的想法:

CODEPEN

现在我做了什么:

改变了动画开始停止点

@keyframes draw {
  100% {
    stroke-dashoffset: -500;
  }
}

为什么是 -500？
因为这是破折号数组的值。
这是在 中定义的:dasharray="500"

在最里面的路径中更改了这个值。才300

我添加了一个线性动画

animation: draw 5s infinite linear;

默认为轻松。我发现动画与线性动画的一致性更好。

注意

dashoffset=500 <- 使动画开始时没有破折号/描边