<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100" style="background-color: #ccc">
    <!-- red -->
    <line x1="0" y1="25" x2="200" y2="25" style="stroke:#fff;stroke-width:5" />
    <line x1="0" y1="25" x2="200" y2="25" class="line line-red" />

    <!-- blue -->
    <line x1="0" y1="50" x2="200" y2="50" style="stroke:#fff;stroke-width:5;" />
    <line x1="0" y1="50" x2="200" y2="50" class="line line-blue" />

    <!-- green -->
    <line x1="0" y1="75" x2="200" y2="75" style="stroke:#fff;stroke-width:5;" />
    <line x1="0" y1="75" x2="200" y2="75" class="line line-green" />
</svg>
.line {
  stroke-dasharray: 100;
  stroke-width: 5;
}

.line-red {
  stroke: red;
  animation: key-line-red 1s linear 0s infinite;
}

.line-blue {
  stroke: blue;
  animation: key-line-blue 3s linear 0s infinite;
}

.line-green {
  stroke: green;
  animation: key-line-green 1s steps(5, end) 0s infinite alternate;
}

@keyframes key-line-red {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 200;
  }
}

@keyframes key-line-blue {
  0% {
    stroke-dashoffset: 200;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes key-line-green {
  0% {
    stroke-dashoffset: 25;
  }

  100% {
    stroke-dashoffset: 75;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.