Need help to fix my CSS animation for continuous flow

Question

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

Am having an animation break something like a page and play again after a few seconds. Is there any way way I can have this animation in continuous flow without any for of break in btw.

Does this answer your question? [CSS animation delay in repeating](https://stackoverflow.com/questions/13887889/css-animation-delay-in-repeating) — T J, May 06 '21 at 16:20

score 0 · Accepted Answer · answered May 06 '21 at 19:56

Simply use -22px (20px + 2px) then control the duration to adjust the speed

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

Need help to fix my CSS animation for continuous flow

1 Answers1