Issue with SVG path not animating - html

Question

I have an SVG I'm trying to animate, but it is not working for some reason.
This is my component where I'm loading the svg
import { JapanMap } from "../illustrations/japanMap";
export default function Home() {
return (
<>
<JapanMap />
</>
);
}
And this is the svg itself and the css:
#japanMap {
stroke-dasharray: 31818.841796875;
stroke-dashoffset: 31818.841796875;
animation: draw 6s ease;
animation-fill-mode: forwards;
}
#keyframes draw {
to {
stroke-dash-offset: 0;
}
}
import React from "react";
export const JapanMap = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="2338971"
viewBox="0 0 2270.4019 2838.8689"
height="801.19189"
width="640.75787"
>
<g transform="translate(563.71426,965.56689)" id="2398">
<path
id="japanMap"
stroke="#000000"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
d="m 1705.6746,-614.68501 c -1.7675,4.9831 -4.7911,8.4043 -7.4279,8.4043 -1.3295,0 -1.961,0.6807 -1.961,2.1138 0,6.3193 -8.9706,15.0674 -14.5534,14.1926 -1.6206,-0.2539 -3.8466,-0.5178 etc..."
></path>
</g>
</svg>
);
};
What could be the reason that it's not animating? I'm not too familiar with CSS.

Answer 1

Might just be the typo in your animation.
there's should be no - between dash and offset.
stroke-dash-offset: 0; becomes:
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
Example
svg {
stroke-dasharray: 20;
stroke-dashoffset: 200;
stroke-width: 5;
animation: draw 3s ease alternate infinite;
animation-fill-mode: forwards;
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
</svg>