CSS Typing Effect
<p>I'm trying to achieve a typing effect with multiple lines in CSS. </p>

<p>This was a good reference point I followed:</p>

<p><a href="https://stackoverflow.com/questions/15925283/css-animated-typing">CSS animated typing</a></p>

<p><a href="https://css-tricks.com/snippets/css/typewriter-effect/" rel="nofollow noreferrer">https://css-tricks.com/snippets/css/typewriter-effect/</a></p>

<p>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?</p>

<p><a href="https://jsfiddle.net/6567onn8/5/" rel="nofollow noreferrer">https://jsfiddle.net/6567onn8/5/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="typewriter"&gt;
  &lt;h1&gt;Hi. I'm Andy.&lt;/h1&gt;
  &lt;h2&gt;I love learning.&lt;/h2&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>