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

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

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

@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; }
}

我希望你能找到答案。