線を描くsvgアニメーション

https://gyazo.com/431ad5074862db8d93fe1a513f61c4ea

code: sample.html

<svg width="200px" height="200px" viewBox="0 0 200 200">

<line x1="10" y1="100" x2="190" y2="100" />

</svg>

code: sample.css

svg {

background: lightgray;

fill: none;

stroke: black;

stroke-width: 2;

stroke-dasharray: 200 200;

stroke-dashoffset: 200;

animation: draw 3s forwards;

}

@keyframes draw {

to {

stroke-dashoffset: 0;

}

}