After perfecting my CSS animation, I have the circle looping around to complete its shape while a check mark fills in the middle with a slight delay. Once both shapes are completed simultaneously, the check mark disappears.
The reason for the disappearing check mark at the end is due to setting the opacity to 0 in the CSS for the check mark element. While exploring other techniques, I noticed this method is commonly used to make an element appear after an animation completes.
I am puzzled as to why, even though the opacity is set to 1 at the end of the animation, the check mark is still vanishing. Is there a solution to this issue or perhaps a better approach to achieve my desired outcome?
Any assistance on this matter would be highly appreciated!
Below is the SVG code snippet:
<svg xmlns="http://www.w3.org/2000/svg" id="checkmark-group" viewBox="0 0 128 128">
<title>
Successful Login
</title>
<circle id="circle" cx="64" cy="64" r="59.4"/>
<path id="checkmark" d="M24.75 62l27.5 27.5 51-51"/>
</svg>
Here is the corresponding CSS style section:
svg {
width: 128px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
circle, #checkmark {
fill: none;
stroke: #000;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 4px;
stroke-dasharray: 400;
}
#checkmark {
animation: checkmark-stroke 3s reverse;
animation-delay: 1s;
opacity: 0;
}
@keyframes checkmark-stroke {
0% {
stroke-dashoffset: 0;
opacity: 0;
}
1% { opacity: 1; }
100% {
stroke-dashoffset: 400;
opacity: 1;
}
}
circle {
animation: circle-stroke 3s;
}
@keyframes circle-stroke {
from {
stroke-dashoffset: -400;
}
to {
stroke-dashoffset: 0;
}
}
You can view the animated code on CodePen: https://codepen.io/abrielshipley/pen/QOKBGE