SVG drawing - shape vanishing after animation [duplicate] - css

Question

This question already has answers here:
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 5 years ago.
I have a shape being animated/drawn which is fine, when the animation is done the shape remains on the page for a couple seconds then vanishes.
First time trying out CSS animations so don't fully understand why it vanishes off the page, I know it's probably something really obvious but any help pointers would be much appreciated.
body {
background-color: #fff;
}
svg {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 600px;
height: 600px;
}
.path {
stroke-dashoffset: 1600;
stroke-dasharray: 1600;
-webkit-animation: draw 5s linear;
-moz-animation: draw 5s linear;
animation: draw 5s linear;
fill-opacity: 0;
-webkit-animation-delay: 1.2s; /* Safari and Chrome */
animation-delay: 1.2s;
}
.path-first-o {
stroke-dashoffset: 1600;
stroke-dasharray: 1600;
-webkit-animation: draw 5s linear forwards;
-moz-animation: draw 5s linear forwards;
animation: draw 5s linear forwards;
fill-opacity: 0;
}
#-webkit-keyframes draw {
30% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
50% {
fill-opacity: 1;
}
100% {
stroke-dashoffset: 1;
fill-opacity: 1;
}
}
#-moz-keyframes draw {
30% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
50% {
fill-opacity: 1;
}
100% {
stroke-dashoffset: 1;
fill-opacity: 1;
}
}
#keyframes draw {
30% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
50% {
fill-opacity: 1;
}
100% {
stroke-dashoffset: 1;
fill-opacity: 1;
}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047" preserveAspectRatio="xMidYMid meet" enable-background="new 0 0 1136 640" xml:space="preserve">
<g id="layer_1">
<g>
<path class="path-first-o"
fill="#027eb4" stroke="#027eb4"
d="M 247.28799,295.10581 29.551064,512.84273 247.28799,730.57965 l 0,-72.57898 L 102.13004,512.84273 247.28799,367.68478 Z"/>
<path class="path-first-o"
fill="#027eb4" stroke="#027eb4"
d="m 475.56912,295.10581 217.73694,217.73692 -217.73694,217.73692 0,-72.57898 L 620.72709,512.84273 475.56912,367.68478 Z" />
<path
class="path-first-o"
fill="#027eb4" stroke="#027eb4"
d="m 247.28799,599.93749 72.57897,0 159.67374,-174.18954 -72.57897,0 z" />
</g>
</g>
</svg>
See CodePen here

Answer 1

You are just missing the forwards keyword for the animation property. It is the a value for the animation-fill-mode property (see mdn).
This value keeps the last frame of the animation.
You can also use it in the animation shorthand like this :
body {
background-color: #fff;
}
svg {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 600px;
height: 600px;
}
.path {
stroke-dashoffset: 1600;
stroke-dasharray: 1600;
-webkit-animation: draw 5s linear;
-moz-animation: draw 5s linear;
animation: draw 5s linear;
fill-opacity: 0;
-webkit-animation-delay: 1.2s;
/* Safari and Chrome */
animation-delay: 1.2s;
}
.path-first-o {
stroke-dashoffset: 1600;
stroke-dasharray: 1600;
-webkit-animation: draw 5s linear forwards;
-moz-animation: draw 5s linear forwards;
animation: draw 5s linear forwards;
fill-opacity: 0;
}
#-webkit-keyframes draw {
30% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
50% {
fill-opacity: 1;
}
100% {
stroke-dashoffset: 1;
fill-opacity: 1;
}
}
#-moz-keyframes draw {
30% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
50% {
fill-opacity: 1;
}
100% {
stroke-dashoffset: 1;
fill-opacity: 1;
}
}
#keyframes draw {
30% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
50% {
fill-opacity: 1;
}
100% {
stroke-dashoffset: 1;
fill-opacity: 1;
}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047" preserveAspectRatio="xMidYMid meet" enable-background="new 0 0 1136 640" xml:space="preserve">
<g id="layer_1">
<g>
<path class="path-first-o"
fill="#027eb4" stroke="#027eb4"
d="M 247.28799,295.10581 29.551064,512.84273 247.28799,730.57965 l 0,-72.57898 L 102.13004,512.84273 247.28799,367.68478 Z"/>
<path class="path-first-o"
fill="#027eb4" stroke="#027eb4"
d="m 475.56912,295.10581 217.73694,217.73692 -217.73694,217.73692 0,-72.57898 L 620.72709,512.84273 475.56912,367.68478 Z" />
<path
class="path-first-o"
fill="#027eb4" stroke="#027eb4"
d="m 247.28799,599.93749 72.57897,0 159.67374,-174.18954 -72.57897,0 z" />
</g>
</g>
</svg>