Problem with starting point of SVG animation for a path/arc - css

Question

I'm trying to animate this SVG path/arc, from the beginning point to the end point, but I can not achieve that. Actually, the animation starts at the midpoint of the arc.
My arc's code is:
#arc {
display: block;
stroke-dashoffset: 3925px;
stroke-dasharray: 3925px;
}
#arc {
-webkit-animation: dashAnim 1s 1s linear alternate forwards;
animation: dashAnim 1s 1s linear alternate forwards;
}
#keyframes dashAnim {
0% {
stroke-dashoffset: 3925px;
}
100% {
stroke-dashoffset: 0px;
}
}
<svg id="arc" viewBox="0 0 1922 100.2">
<path id="arc-stroke" fill="none" stroke="#FF0000" strokeWidth="5"
strokeMiterlimit="10" d="M969.3,21.9c-344.4,0-669.8,82.4-956.8,229.7v6
h1922.3C1646,106.7,1317.2,21.9,969.3,21.9z"/>
</svg>
Can anyone help?

Answer 1

When opened in application like Illustrator, your path had additional points off canvas. I cleaned them up and the animation seems to work as you wanted.
There were no other obvious problems with the path that I could find.
My guess is - when you animate a closed path that is effectively a circle, something has to be the beginning and the end. In this case it was the middle of the arc.
#arc {
display: block;
stroke-dashoffset: 3925px;
stroke-dasharray: 3925px;
}
#arc {
-webkit-animation: dashAnim 1s 1s linear alternate forwards;
animation: dashAnim 1s 1s linear alternate forwards;
}
#keyframes dashAnim {
0% {
stroke-dashoffset: 3925px;
}
100% {
stroke-dashoffset: 0px;
}
}
<svg id="arc" viewBox="0 0 1922 100.2">
<path id="arc-stroke" fill="none" stroke="#FF0000" strokeWidth="5"
strokeMiterlimit="10" d="M1591.4,115.8c-196.6-61.1-405.6-93.9-622.1-93.9c-218.8,0-430,33.3-628.5,95.3"/>
</svg>