在最後一幀

Question

CodePen

在上述codepen CSS動畫SVG行程止擋有筆劃動畫進入視野的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是Here，其工作的罰款。