Andy Jean Louis Andy Jean Louis - 25 days ago 23
CSS Question

CSS Typing Effect

I'm trying to achieve a typing effect with multiple lines in CSS.

This was a good reference point I followed:

CSS animated typing

https://css-tricks.com/snippets/css/typewriter-effect/

Now my desired effect is that the first border-right's visibility be hidden once the first blinking cursor's animation ends. A the border-right is still on screen after the animation ends and I want it not to be visible. (As if enter button on a keyboard was pressed.) How would I go about that?

https://jsfiddle.net/6567onn8/5/



.typewriter h1 {
text-align: center;
overflow: hidden;
font-size: 100%;
border-right: .15em solid #fff;
white-space: nowrap;
/* keeps content in one line */
letter-spacing: .15em;
animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter h2 {
font-size: 100%;
white-space: nowrap;
overflow: hidden;
border-right: .15em solid black;
-webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end infinite;
-webkit-animation-delay: 3s;
-webkit-animation-fill-mode: both;
-moz-animation: typing 2s steps(26, end), blink-caret 1s step-end infinite;
-moz-animation-delay: 3s;
}
/* The typing effect */

@keyframes typing {
from {
width: 0
}
to {
width: 9em;
}
}
@keyframes blink-caret {
from, to {
border-color: transparent
}
50% {
border-color: #000;
}
}

<div class="typewriter">
<h1>Hi. I'm Andy.</h1>
<h2>I love learning.</h2>
</div>




Answer

Just take out infinite

.typewriter h1 {
  text-align: center;
  overflow: hidden;
  font-size: 100%;
  border-right: .15em solid #fff;
  white-space: nowrap;
  /* keeps content in one line */
  letter-spacing: .15em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter h2 {
  font-size: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-right: .15em solid black;
  -webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end;
  -webkit-animation-delay: 3s;
  -webkit-animation-fill-mode: both;
  -moz-animation: typing 2s steps(26, end), blink-caret 1s step-end;
  -moz-animation-delay: 3s;
}
/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 9em;
  }
}
@keyframes blink-caret {
  from, to {
    border-color: transparent
  }
  50% {
    border-color: #000;
  }
}
<div class="typewriter">
  <h1>Hi. I'm Andy.</h1>
  <h2>I love learning.</h2>
</div>

Comments