html – CSS typewriter effect in two different lines

So I found this typewriter effect on CSS tricks and I've been trying to play with it. One problem that I do not understand how to solve it is that two lines are not written at the same time. I want the "Hello!" to be written first, and then "I'm Farah" to go after. I have it set for all h1, so, of course, both appear together, but is there any way to specify the order in which you want them to appear? Or does that imply involving jQuery in this?

HTML

Hello!

I'm farah

CSS:

h1 {
overflow: hidden; / * Ensures that the content is not revealed until the animation * /
Right edge: .15em solid orange; / * The screenwriter's cursor * /
blank space: nowrap; / * It keeps the content in a single line * /
margin: 0 auto; / * Gives that displacement effect as writing occurs * /
space between letters: .15em; / * Adjust as needed * /
animation:
writing steps 3.5s (40, final),
blink-caret .75s infinite step-end;
/ * font-size: 40px;
Typographic family: Lato & # 39 ;, sans-serif;
weight of the source: lighter; * /
}

/ * The writing effect * /
@keyframes writing {
from {width: 0}
a {width: 100%}
}

/ * The effect of the typewriter cursor * /
@keyframes blink-caret {
from, to {border color: transparent}
50% {border color: orange; }
}