当前位置 : 主页 > 网页制作 > css >

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

来源:互联网 收集:自由互联 发布时间:2021-06-13
CodePen 在上面的代码中有一个SVG,笔画动画进入视图,但最后它只是消失了. 有没有办法在加载后将其保持在视图中? .path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear altern
CodePen

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

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

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

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
将这两个属性添加到.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,它的工作正常.

网友评论