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