Как приостановить или задержать мигание текстовой анимации, чтобы мой текст отображался в течение короткого периода времени?

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

Надеюсь, приведенный ниже код будет вам полезен. Ниже приведен 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; }
}

Надеюсь, вы найдете ответ.

Answer 2

Распределите переходы в ваших @keyframes по процентам, чтобы сделать их нерегулярными.

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