CSS动画SVG路径绘制停留在最后一帧

Question

CodePen

在上面的 CodePen 中，有一个 SVG，在动画结束时它会消失。

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

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

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

- ngplayground

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在这里，它的工作很好。

- Jayababu

Answer 2

这不完全是 OP 所要求的，但如果您希望使用 SVG 的 <animate> 标签进行动画，并遇到同样的问题，您可以使用 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>

请参见此处的参考文献。

- cyqsimon

---

尝试了一下，因为我正在考虑使用SMIL动画而不是CSS动画（因为即使相对简单，CSS动画也非常卡顿）。谢谢！ - Igor

感谢您的回答，对我有很大帮助。 - Ring