Typewriter effect. Print text separately

Question

I want to make a typewriter effect, but so that the first line is printed first, then the second then the third. I have them printed at the same time, animation delay doesn't work. How can I do this? And is it possible for the flashing cursor to disappear after the end of printing?

.index-title-main_1 h1 {
  font-family: monospace;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  border-right: .17em solid pink;
  animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -webkit-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -moz-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -o-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -ms-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
}
.index-title-main_2 h1 {
  font-family: monospace;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  border-right: .17em solid pink;
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  -ms-animation-delay: 2s;
  animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -webkit-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -moz-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -o-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -ms-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
}
.index-title-main_3 h1 {
  font-family: monospace;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  border-right: .17em solid pink;
  animation-delay: 4s;
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  -ms-animation-delay: 4s;
  animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -webkit-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -moz-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -o-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -ms-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
}

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}

@keyframes blinking-cursor {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: pink;
  }
}

<div class="index-title-main_1"><h1>Text 1<br></h1></div>
<div class="index-title-main_2"><h1>Text 2<br></h1></div>
<div class="index-title-main_3"><h1>Text 3<br></h1></div>

Answer 1

This is because the delay is overwritten by entering the shorthand property under delay.

You can try this

.index-title-main_1 h1 {
    font-family: monospace;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    border-right: .17em solid pink;
    -webkit-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -moz-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -o-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -ms-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
}

.index-title-main_2 h1 {
    font-family: monospace;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    border-right: .17em solid pink;
    -webkit-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -moz-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -o-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -ms-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    -ms-animation-delay: 2s;
}

.index-title-main_3 h1 {
    font-family: monospace;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    border-right: .17em solid pink;
    -webkit-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -moz-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -o-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -ms-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    -ms-animation-delay: 4s;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blinking-cursor {
    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: pink;
    }
}

<div class="index-title-main_1">
    <h1>Text 1<br></h1>
</div>
<div class="index-title-main_2">
    <h1>Text 2<br></h1>
</div>
<div class="index-title-main_3">
    <h1>Text 3<br></h1>
</div>

or this

.index-title-main_1 h1 {
    font-family: monospace;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    border-right: .17em solid pink;
    -webkit-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -moz-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -o-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -ms-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
}

.index-title-main_2 h1 {
    font-family: monospace;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    border-right: .17em solid pink;
    -webkit-animation: typing 2s steps(30, end) 2s, blinking-cursor .5s step-end 2s infinite;
    -moz-animation: typing 2s steps(30, end) 2s, blinking-cursor .5s step-end 2s infinite;
    -o-animation: typing 2s steps(30, end) 2s, blinking-cursor .5s step-end 2s infinite;
    -ms-animation: typing 2s steps(30, end) 2s, blinking-cursor .5s step-end 2s infinite;
    animation: typing 2s steps(30, end) 2s, blinking-cursor .5s step-end 2s infinite;
}

.index-title-main_3 h1 {
    font-family: monospace;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    border-right: .17em solid pink;
    -webkit-animation: typing 2s steps(30, end) 4s, blinking-cursor .5s step-end 4s infinite;
    -moz-animation: typing 2s steps(30, end) 4s, blinking-cursor .5s step-end 4s infinite;
    -o-animation: typing 2s steps(30, end) 4s, blinking-cursor .5s step-end 4s infinite;
    -ms-animation: typing 2s steps(30, end) 4s, blinking-cursor .5s step-end 4s infinite;
    animation: typing 2s steps(30, end) 4s, blinking-cursor .5s step-end 4s infinite;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blinking-cursor {
    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: pink;
    }
}

<div class="index-title-main_1">
    <h1>Text 1<br></h1>
</div>
<div class="index-title-main_2">
    <h1>Text 2<br></h1>
</div>
<div class="index-title-main_3">
    <h1>Text 3<br></h1>
</div