title: Make blinking cursor disappear at end of CSS animation
body: <p>I have a blinking cursor animation set up with two lines of text.</p>
  
  <p>I want to have the cursor appear as the text appears, and vanish at the end of the first line – but leave it blinking at the end of the <em>second</em> line.</p>
  
  <p>Someone asked a very similar question, but the solution makes the cursor completely invisible: </p>
  
  <p><a href="https://stackoverflow.com/questions/44359070/stopping-a-blinking-cursor-at-end-of-css-animation">Stopping a blinking cursor at end of css animation</a></p>
  
  <p>Tested this answer code (on several browsers), and it just doesn't work.</p>
  
  <p>Here's what I have:</p>
  
  <p><strong>Code:</strong></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>.typewriter1 p {
    overflow: hidden;
    border-right: .15em solid #00aeff;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: 0;
    color: #fff;
    padding-left: 10px;
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
  }
  
  .typewriter2 p {
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    border-right: .15em solid #00aeff;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: 0;
    color: #fff;
    padding-left: 10px;
    opacity: 0;
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite, slidein 1s ease 3.5s forwards;
    animation-delay: 3.5s;
  }
  
  
  /* The typing effect */
  
  @keyframes typing {
    from {
      width: 0
    }
    to {
      width: 100%
    }
  }
  
  @keyframes slidein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  
  /* The typewriter cursor effect */
  
  @keyframes blink-caret {
    from,
    to {
      border-color: #00aeff
    }
    50% {
      border-color: transparent;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="typewriter1"&gt;
    &lt;p&gt;A well defined plan will identify problems,&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="typewriter2"&gt;
    &lt;p&gt; address challenges, and help restore confidence.&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>