CSS Animate SVG笔划在最后一帧停止

Question

CodePen

在上面的代码中有一个SVG,笔画动画进入视图,但最后它只是消失了.

有没有办法在加载后将其保持在视图中？

.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在这里,它的工作正常.

Answer 2

这并不完全是 OP 所要求的，但如果您希望在<animate>动画中使用 svg 标签并遇到相同的问题，您可以使用该fill属性。像这样：

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

这将在完成时将动画冻结在最后一帧。例如：

<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>

请参阅此处的参考。