在上面的codepen中有一个SVG,笔画动画进入视图,但最后它会消失。
有没有办法在加载后将其保持在视图中?
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
答案 0 :(得分:7)
将这两个属性添加到.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,工作正常。
答案 1 :(得分:1)
这并非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>
请参见参考文献here。