CODEWITHSUNDEEP
htmlcssanimation
Cornelius Labuschagne
Cornelius Labuschagne

Reputation: 161

Stopping a blinking cursor at end of css animation

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

Upvotes: 1

Views: 8112

Answers (5)

padina
padina

Reputation: 137

I have had the same problem for a switch-toggle. The blinking-cursor mart the position in the text, where the next character will be typed. I solved the problem by making the caret transparent (definition of my lable-class):

caret-color: transparent;

Upvotes: 0

Shantanu Sarkar
Shantanu Sarkar

Reputation: 55

Try this:

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

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

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-right: .15em solid orange; }
}

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

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.

Upvotes: 4

Shantanu Sarkar
Shantanu Sarkar

Reputation: 55

Try removing infinite like this: 

animation: typing 3.5s steps(60, end), blink-caret .65s step-end;

Upvotes: 0

Gerard
Gerard

Reputation: 15786

Remove the word infinite from the animation for #Header:

animation: typing 3.5s steps(60, end), blink-caret .65s step-end;

Upvotes: 1

Related Questions