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

【问题标题】：Need help to fix my CSS animation for continuous flow需要帮助来修复我的 CSS 动画以实现连续流动
【发布时间】：2021-05-07 03:56:24
【问题描述】：

.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>

我有一个动画打破了一个页面，几秒钟后再次播放。有什么办法可以让这个动画连续流动，而不会出现任何中断。

【问题讨论】：

这能回答你的问题吗？ CSS animation delay in repeating

标签： html css animation frontend css-animations

【解决方案1】：

只需使用-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>

【讨论】：