CSS Typewriter动画：如何隐藏第二行文本

Question

我使用CSS打字动画时出现问题：/ 我正在制作两行文字的动画，但我希望第一行文字在第一行的动画完成后出现。因此看起来动画无缝地延续到第二句。虽然我的h2的动画在之后的3s开始，但它已经在开头出现（与h1同时）。如何解决这个问题？ 谢谢！这是演示https://jsfiddle.net/zw9buowb/

.typewriter h1 {
   overflow: hidden; 
   border-right: .15em solid black; 
   white-space: nowrap; 
   margin: 0; 
   letter-spacing: 2px; 
   animation:
     typing 4s steps(30, end),
     blink-caret .75s step-end infinite;
}

.typewriter h2 {
   border-right: .15em solid black; 
   white-space: nowrap; 
   margin: 0; 
   letter-spacing: 2px;
   animation:
     typing 4s steps(30, end),
     blink-caret .75s step-end infinite;
   -webkit-animation-delay: 3s;
}

.typewriter {
  font-family: Montserrat;
  font-size: 10px;
  text-align: center;
  display: inline-block;
}

.center {
  text-align: center;
}