Stopping a blinking cursor at end of css animation

Issue

I guys I have tried a lot of things that didn’t work. I have a css animation with a blinking cursor. I am trying to use it in this game I’m developing.

Link to game for visual reference: https://code.sololearn.com/WF65X6DEns7o/#css

+++

so here is the code that is a problem

HTML:

   <div id = "Header"> <b>Real Estate Agent</b> </div>

CSS:

#Header{
font-size:50px; color:darkOrange; text-shadow:3px 3pxblack;
overflow:hidden; 
letter-spacing: .15em;
animation: typing 3.5s steps(60, end), blink-caret .65s step-end infinite; 
white-space: nowrap; 
border-right: .15em solid orange;
width:500px;
}

 @keyframes typing {
  from { width: 0 }
   to { width: 500px }
   }

@keyframes blink-caret {
from, to { border-color: orange }
 50% { border-color: transparent; }
   }

+++++++++++++

currently the cursor blinks until all the text is done typing and then it keeps blink at the end of the words.

How can i make the cursor stop blinking at the end of the animation and stop the animation cycle.

As i have said i have tried a few things and nothing is working.

thanks

Solution

Replace the infinite with 8 (experiment with the value to your liking) and set the initial color of the border to transparent.

animation: typing 3.5s steps(60, end), blink-caret .65s step-end 8; 
white-space: nowrap; 
border-right: .15em solid transparent;

This way it will blink 8 times and then become invisible.

Answered By – Gabriele Petrioli

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published