Animated dashed line using SVG - html

Question

I try to find a way to draw an animated dash line like HERE.
The problem with this solution is, that a black line is drawn underneath a dashed white line. The thing is, I want to have the middle parts (the spaces between the dashes) transparent, to put this animation on the top of a map image, not filled with color's (like white in this example).
I tried with different set ups of the stroke-dasharray and stroke-dashoffset attribute, but all this results were not like the way I search for.
Currently I embed a svg object directly in my HTML document. The svg tag includes the path tag, which is recommended for the path itself. The animation I try to realize with simple css animation key frames like:
#keyframes dash
{
from
{
stroke-dashoffset: 1000;
}
to
{
stroke-dashoffset: 0;
}
}

Answer 1

The space between the dashes is by default transparent.
Is there something your doing to change the color?
svg {
background-image: linear-gradient(45deg, red, blue);
}
svg circle {
fill: pinK;
stroke: rgba(0, 0, 0, 0.9);
stroke-width: 10px;
stroke-dasharray: 5;
stroke-dashoffset: 0;
animation: test 10s;
-webkit-animation: test 10s;
}
#keyframes test {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 200;
}
}
#-webkit-keyframes test {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 200;
}
}
<svg width="200" height="200" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" />
</svg>