如何让CSS实现的SVG线条动画结束后自动重启？

API 探路者

2026-5-27

解决SVG线条动画结束后无法立即重启的问题

嘿，我来帮你搞定这个SVG线条动画的循环问题！首先咱们先搞清楚你遇到的问题根源：

你给animation属性加的2s是动画延迟（animation-delay），这个属性的作用是每次动画循环开始前都会等待指定的时间——所以第一次动画要等2秒才启动，动画结束后又要等2秒才会重启，这就导致了你看到的“动画结束后无法立即再次启动”的现象。

接下来给你两种解决方案，优先用纯CSS，完全能满足你的需求：

方案1：纯CSS实现无缝自动重启（推荐）

如果想要动画结束后立即无缝循环，直接去掉2s的延迟参数即可，同时修正keyframes里的语法错误（去掉多余的逗号），还要确保初始状态的stroke-dashoffset正确：

line {
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 500%;
  stroke-dashoffset: 500%; /* 初始让线条完全隐藏 */
  -webkit-animation: draw 200s infinite;
  animation: draw 200s infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes draw {
  0% {
    stroke-dashoffset: 500%;
  }
  100% {
    stroke-dashoffset: 0%;
  }
}

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

这里的infinite关键字本身就会让动画无限循环，而且结束后立即重启，完全不需要额外的延迟。

如果你只需要第一次动画启动前有2秒延迟，之后重启无缝衔接，可以利用多值animation-delay的技巧（现代浏览器都支持）：

line {
  /* 其他样式不变 */
  -webkit-animation: draw 200s infinite;
  animation: draw 200s infinite;
  -webkit-animation-delay: 2s, 0s; /* 第一次延迟2s，后续循环无延迟 */
  animation-delay: 2s, 0s;
}

方案2：JavaScript控制（仅当需要额外逻辑时使用）

如果纯CSS满足不了你的特殊需求（比如动画结束时要触发其他操作、动态调整动画时长等），可以用JS监听animationend事件手动重启动画：

<body>
  <svg height="100" width="250">
    <line id="animatedLine" x1="25" y1="30" x2="45" y2="30" style="stroke:rgb(255,0,0);stroke-width:4" />
  </svg>

  <script>
    const lineEl = document.getElementById('animatedLine');
    
    lineEl.addEventListener('animationend', () => {
      // 先重置动画状态
      lineEl.style.animation = 'none';
      // 强制浏览器重绘，避免动画不生效
      void lineEl.offsetWidth;
      // 重新启动动画
      lineEl.style.animation = 'draw 200s infinite';
    });
  </script>
</body>

不过这种情况其实纯CSS的infinite已经完全能满足自动重启的需求，除非你有额外的业务逻辑要处理。

总结一下：你遇到的问题就是误用了animation-delay，去掉它就能实现动画结束后立即重启，完全不需要JavaScript或jQuery。

内容的提问来源于stack exchange，提问作者Ramiro Tormenta

如何让CSS实现的SVG线条动画结束后自动重启？

方案1：纯CSS实现无缝自动重启（推荐） #

方案2：JavaScript控制（仅当需要额外逻辑时使用） #

方案1：纯CSS实现无缝自动重启（推荐）

方案2：JavaScript控制（仅当需要额外逻辑时使用）