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

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!