需要帮助修复我的 CSS 动画以实现连续流

Need help to fix my CSS animation for continuous flow

.svgContainer{
  width:200px; 
  height: 200px; 
  margin-bottom:-10px; 
}


svg line {
  stroke: #5f39dd;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-dasharray: 2px 20px;
  animation: animateline 2s linear both infinite;
}

  
  @keyframes animateline {
    from {
      stroke-dashoffset: 0;
    }
    to {
      stroke-dashoffset: -5rem;
    }
  }
<div class="svgContainer" >
  <svg >
     <line x1="0" y1="0" x2="200" y2="200" ></line>
  </svg>
</div>

让动画中断页面之类的内容并在几秒钟后再次播放。 有什么办法可以让这个动画连续播放,顺便说一下,没有任何中断。

只需使用-22px (20px + 2px) 然后控制持续时间来调整速度

.svgContainer {
  width: 200px;
  height: 200px;
  margin-bottom: -10px;
}

svg line {
  stroke: #5f39dd;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-dasharray: 2px 20px;
  animation: animateline .5s linear infinite;
}

@keyframes animateline {
  to {
    stroke-dashoffset: -22px;
  }
}
<div class="svgContainer">
  <svg>
     <line x1="0" y1="0" x2="200" y2="200" ></line>
  </svg>
</div>