在上面的 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;
}
}
最佳答案
将这两个属性添加到您的.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 ,它工作正常。
关于CSS Animate SVG 笔画停在最后一帧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30238333/