CSS3 : appear check mark and text on the same time - html

Question

I have a button with check mark and text.I want check mark and text to be appeared on the same time. in my code I get text to be appeared early than check mark.
.sending_btn {
outline: none;
width: 128px;
height: 30px;
border-radius: 2px;
border: thin #3a3f51 solid;
transform-origin: center center;
}
.sending_btn span {
color: #3a3f51;
}
.sending_btn:focus, .sending_btn:active {
padding: 0;
}
svg{
vertical-align:middle;
}
.svg-success {
stroke-width: 2px;
stroke: #3a3f51;
fill: none;
}
.svg-success path {
stroke-dasharray: 17px, 17px;
stroke-dashoffset: 0px;
-webkit-animation: checkmark 0.25s ease-in-out 0.2s backwards;
animation: checkmark 0.25s ease-in-out 0.2s backwards;
}
.svg-success circle {
stroke-dasharray: 76px, 76px;
stroke-dashoffset: 0px;
transform: rotate(-90deg);
transform-origin: 50% 50%;
-webkit-animation: checkmark-circle 0.6s ease-in-out forwards;
animation: checkmark-circle 0.6s ease-in-out forwards;
}
#keyframes checkmark {
0% {
stroke-dashoffset: 17px;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes checkmark-circle {
0% {
stroke-dashoffset: 76px;
}
100% {
stroke-dashoffset: 0px;
}
}
<button type="button" name="button" class="sending_btn bg-white-only m-t-25px" *ngIf="show_btn == true">
<svg class="v-middle" width="26" height="26" viewBox="-263.5 236.5 26 26">
<g class="svg-success">
<circle cx="-250.5" cy="249.5" r="12"/>
<path d="M-256.46 249.65l3.9 3.74 8.02-7.8"/>
</g>
</svg>
<span class=""> Saved</span></button>
check mark and text should be appeared on the same time and completed on the same time as well.
Any help would be great.
Thank You.

Answer 1

you need to set-up some animation also for the span tag
.sending_btn {
outline: none;
width: 128px;
height: 30px;
border-radius: 2px;
border: thin #3a3f51 solid;
transform-origin: center center;
}
.sending_btn span {
color: #3a3f51;
animation: 1.2s fadeIn;
animation-fill-mode: forwards;
opacity: 0;
}
.sending_btn:focus, .sending_btn:active {
padding: 0;
}
svg{
vertical-align:middle;
}
.svg-success {
stroke-width: 2px;
stroke: #3a3f51;
fill: none;
}
.svg-success path {
stroke-dasharray: 17px, 17px;
stroke-dashoffset: 0px;
-webkit-animation: checkmark 0.25s ease-in-out 0.2s backwards;
animation: checkmark 0.25s ease-in-out 0.2s backwards;
}
.svg-success circle {
stroke-dasharray: 76px, 76px;
stroke-dashoffset: 0px;
transform: rotate(-90deg);
transform-origin: 50% 50%;
-webkit-animation: checkmark-circle 0.6s ease-in-out forwards;
animation: checkmark-circle 0.6s ease-in-out forwards;
}
#keyframes checkmark {
0% {
stroke-dashoffset: 17px;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes checkmark-circle {
0% {
stroke-dashoffset: 76px;
}
100% {
stroke-dashoffset: 0px;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<button type="button" name="button" class="sending_btn bg-white-only m-t-25px" *ngIf="show_btn == true">
<svg class="v-middle" width="26" height="26" viewBox="-263.5 236.5 26 26">
<g class="svg-success">
<circle cx="-250.5" cy="249.5" r="12"/>
<path d="M-256.46 249.65l3.9 3.74 8.02-7.8"/>
</g>
</svg>
<span class=""> Saved</span></button>