CSS Animate SVG 笔画停在最后一帧

Question

CodePen

在上面的 codepen 中有一个 SVG，笔划动画显示在 View 中，但最后它就消失了。

有没有办法让它在加载后保持可见？

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

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

Answer 1

将这两个属性添加到您的.path

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

CSS 将是:

.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 是 Here ，它工作正常。