CSS Animate SVG stroke stop at last frame

Question

CodePen

In the above codepen there is an SVG that the stroke animates into view, but at the end it just disappears.

Is there a way to keep it into view once its loaded?

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Answer 1

add these two properties to your .path

  animation-fill-mode: forwards; // Stay on the last frame
    animation-iteration-count: 1;// Run only once 

Css will be:

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate;
animation-fill-mode: forwards; // Stay on the last frame
    animation-iteration-count: 1;
}

Codepen is Here,its working fine.

Answer 2

This is not exactly what the OP asked for, but in case you wish to use svg's <animate> tag for your animation and encountered the same issue, you can use the fill attribute. Like this:

<animate ... fill="freeze"/>

This will freeze the animation at its last frame on completion. For example:

<svg viewBox="-5 -5 100 20" xmlns="http://www.w3.org/2000/svg">
  <rect width="90" height="10">
    <animate attributeName="width" values="0;90" dur="3s" repeatCount="1" fill="freeze"/>
  </rect>
</svg>

See reference here.