How to run CSS text animation in a sequence. (one line of text after another)

Question

I have this fiddle: https://jsfiddle.net/8uwu59sL/ 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

Answer 1

You need to manage the animation-delay value, one way is setting that for each one on CSS with :nth-child selector but if you can use Jquery, try this:

$('p').each(function(i) {
  $(this).css({
    "animation-delay": i + "s"
  })
});

body {
  background: #000;
  padding-top: 10px;
}
p {
  width: 0;
  color: lime;
  font-family: "Courier";
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  animation: type 4s steps(60, end) forwards;
}
p a {
  color: lime;
  text-decoration: none;
}
span {
  animation: blink 1s infinite;
}
@keyframes type {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes blink {
  to {
    opacity: .0;
  }
}
::selection {
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>First Line...</p>
<p>Second Line...</p>
<p>Third Line...</p>
<p>Fourth Line...</p>
<p>Fifth Line...</p>
<p>Sixth Line...</p>
<br>
<p>Final/Blinking Line<span>|</span>
</p>

Answer 2

So I'll answer your original question first, as it's fairly straightforward with the above setup (which looks really cool, btw). Anyway, you'll want to add the following to each line in order to stagger their animations:

p:nth-child(2) {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
p:nth-child(3) {
  -webkit-animation-delay: 84s;
  animation-delay: 8s;
}

Basically, just delay the number of seconds required for the line above to finish "typing". I'll look a little further into your question about the blinking rate!

Answer 3

PURE CSS APPROACH:

To achieve your first requirement, you need to use the css selector :nth-child(). How to use it: element:nth-child(n) where n represents the index of the child element in its parent.

For the other one you would need to separate your text and the "|" each in a separate <span> to target them individually with a different animation duration (speed).

EDIT:

If you can use JQuery and you're planning on adding more lines over time, I would recommend using DaniP's answer, it's way more scalable, without worrying about adding a new css selector for every line. If you want to target a specific line to change something like animation-duration you could just target them individually adding an id and using css.

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: 0;
  opacity: 0;
  animation: type 4s steps(60, end) forwards;
  -webkit-user-select: none;
  user-select: none;
}
p:nth-child(2) {
  animation-delay: 1s;
}
p:nth-child(3) {
  animation-delay: 2s;
}
p:nth-child(4) {
  animation-delay: 3s;
}
p:nth-child(5) {
  animation-delay: 4s;
}
p:nth-child(6) {
  animation-delay: 5s;
  margin-bottom: 25px;
}
p:nth-child(7) {
  animation-delay: 6s;
}
p:nth-child(7) span:first-child {
  animation-duration: 0.8s;
}
span {
  animation: blink 1.8s infinite 8s;
}
p a {
  color: lime;
  text-decoration: none;
}
@keyframes type {
  0% {
    opacity: 1;
  }
  100% {
    width: 30em;
    opacity: 1;
  }
}
@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
::selection {
  background: black;
}

<p>First Line...</p>
<p>Second Line...</p>
<p>Third Line...</p>
<p>Fourth Line...</p>
<p>Fifth Line...</p>
<p>Sixth Line...</p>
<p><span>Final/Blinking Line</span>  <span>|</span>
</p>