A problem about stroke-dashoffset in svg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .svgContent {
      border: 2px solid -sharpddd;
      background: -sharpddd;
      border-radius: 5px;
      width: 50%;
      margin: auto;
      height: 40px;
      line-height: 40px;
      padding-top: 20px;
    }
    .lineAnimation {
      -webkit-animation: testMove 3s linear infinite;
    }
    @-webkit-keyframes testMove {
      from {
        stroke-dashoffset: 100%
      }
      to {
        stroke-dashoffset: 0
      }
    }
    </style>
</head>
<body>
    <div class="svgContent">
      <svg viewBox="0 0 300 10">
          <line class="lineAnimation" x1="0" y1="0" x2="300" y2="0" 
          stroke="black" stroke-width="10" stroke-dasharray="40,10" stroke-dashoffset="" />
      </svg>
    </div>
</body>
</html>

does not quite understand the changing process of stroke-dashoffset:100%-> 0.
seems to be because 100% and 0% do not coincide, and the animation flashes when it is repeated.
Source of the problem: this problem was found when using the plug-in leaflet-ant-path. Looking at the source code, we found that the animation effect is to change stroke-offset:100%-> 0
leaflet-ant-path official website address: https://rubenspgcavalcante.gi.
official website gives the same problem.