SVG animation

My CSS
svg {
  #grafi {
    stroke: #000;
    stroke-width: 1;
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
    animation-name: draw;
    animation-duration: 5s;
    animation-fill-mode: forwards; // Stay on the last frame
    animation-iteration-count: 1; // Run only once
    animation-timing-function: linear;
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

My HTML:
<polyline id="grafi" points="" style="fill:none;stroke:red;stroke-width:0.7">
            </polyline>
***I add points to polyline in JS with append (it works because I get the line just the animation is not there)