CSS Animation of SVG stop at last frame
The codefed above has an SVG that animates the stroke, but at the end it just disappears.
Is there a way to keep it in sight after loading it?
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
+3
source to share
1 answer
add these two properties to your .path
animation-fill-mode: forwards; // Stay on the last frame
animation-iteration-count: 1;// Run only once
The css will be:
.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 , his job is great.
+7
source to share