title: How to run CSS text animation in a sequence. (one line of text after another)
body: <p>I have this fiddle: <a href="https://jsfiddle.net/8uwu59sL/" rel="nofollow">https://jsfiddle.net/8uwu59sL/</a> Currently it's typing out every line at the same time, but I'd like to make it type them out one line after another with a second long delay in between lines.</p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;p&gt;First Line...&lt;/p&gt;
  &lt;p&gt;Second Line...&lt;/p&gt;
  &lt;p&gt;Third Line...&lt;/p&gt;
  &lt;p&gt;Fourth Line...&lt;/p&gt;
  &lt;p&gt;Fifth Line...&lt;/p&gt;
  &lt;p&gt;Sixth Line...&lt;/p&gt;
  &lt;br&gt;
  &lt;p&gt;Final/Blinking Line&lt;span&gt;|&lt;/span&gt;&lt;/p&gt; 
  </code></pre>
  
  <p>And this is the CSS:</p>
  
  <pre><code>body{
    background: #000;
    padding-top: 10px;
  } 
  
  p{
    color: lime; 
    font-family: "Courier";
    font-size: 20px;
    margin: 10px 0 0 10px;
    white-space: nowrap;
    overflow: hidden;
    width: 30em;
    animation: type 4s steps(60, end); 
  }
  
  p:nth-child(2){
    animation: type2 8s steps(60, end);
  }
  
  p a{
    color: lime;
    text-decoration: none;
  }
  
  span{
    animation: blink 1s infinite;
  }
  
  @keyframes type{ 
    from { width: 0; } 
  } 
  
  @keyframes type2{
    0%{width: 0;}
    50%{width: 0;}
    100%{ width: 100; } 
  } 
  
  @keyframes blink{
    to{opacity: .0;}
  }
  
  ::selection{
    background: black;
  }
  </code></pre>
  
  <p>I was wondering, how do I do this? 
  Also, is it possible to have the last line ("Final/Blinking Line") blinking slowly, and have the "|" blinking too, but at a different rate?
  Thanks in advance for any help with this!</p>