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

Question

我有一个带有复选标记和文本的按钮。我希望复选标记和文本同时出现。在我的代码中，我得到的文本比复选标记早出现。

.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=""> &nbsp; Saved</span></button>

对勾和文字要同时出现，同时完成。

任何帮助都会很棒。

谢谢。

Answer 1

你还需要为span标签设置一些动画

.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=""> &nbsp; Saved</span></button>