如何暂停或延迟闪烁的文本动画，以使文本显示一小段时间？

Question

我有一个带有一些闪烁的文本的按钮，但是我想在文本可见时将其延迟一小段时间，以便用户有足够的时间阅读文本，然后逐渐淡化为透明。

.btn-blink{
 border: 2px solid #4aa570;
 margin-bottom:20px;
 color:#fff;background:#4aa570;
 animation:blinkingText 3.2s infinite;
}

@keyframes blinkingText{
    0%{ color: #fff;    }
    25%{color: transparent; }
    50%{color: #fff;    }
    75%{color: transparent;}
    100%{color: #fff;   }
    }

Answer 1

按百分比分散@keyframe中的过渡以使其不规则。

@keyframes blinkingText {
    0% {color: #fff;}
    50% {color: #fff;}
    75% {color: transparent;}
    100% {color: #fff;}
}

Answer 2

我希望下面的代码会有所帮助。下面是HTML代码。

//HTML CODE
<button>
  <span class="blinking">HELLO THERE</span>
</button>

使用关键帧如下编写CSS代码：

//CSS 
.blinking{
   animation:blinkingText 0.8s infinite;
}

@keyframes blinkingText{
 0%{ color: #000;}
 49%{ color: transparent; }
 50%{ color: transparent; }
 99%{ color:transparent; }
 100%{ color: #000; }
}

希望您能找到答案。