Подскажите, что не так? Линия должна прорисовываться 10 секунд и круг смещаться должен вдоль этой же линии 10 секунд, но на практике все не так
((
<html><body><head>
<style>
.my_path {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: dash 10s linear forwards;
}
@keyframes dash {
from {
stroke-dashoffset: 100%;
}
to {
stroke-dashoffset: 0%;
}
}
</style>
</head>
<svg width="400" height="300">
<path class="my_path" d="M 50,100 L 100,100 L 200,100 L 250,100"
fill="rgb(100, 100, 100)" stroke="#888" stroke-width="2"/>
<circle cx="0" cy="0" r="10" fill="rgb(99,199,99)">
<animateMotion begin="0s" dur="10s"
path="M 50,100 L 100,100 L 200,100 L 250,100" />
</circle>
</svg>
</body></html>