How can I play an animation after the previous one is finished?

I have been trying the typewriter animation, and it went well!

.typewriter{
  display: flex;
  justify-content: center;
}

.typewriter .p1,.p2{
  font-family: monospace;
  font-size: 1.5rem;
/*   margin-inline: auto; */
  overflow: hidden;
/* keeps on a single line */
  white-space: nowrap;
/* cursor */
  border-right: 3px solid;
/* steps = number of characters   */
  animation: typing 3s steps(22) forwards, blink 1s step-end infinite;
}

.typewriter .p2{
  font-size: 3rem;
  animation-delay: after previos;
}

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

@keyframes blink{
  50%{
    border-color: transparent;
  }
}

<div class = "typewriter">
  <div>
    <p class = "p1">Hello, Welcome to CodePen!</p>
    <p class = "p2">Let's get started!</p>
  </div>
</div>

But I am confused, about how to play the second line animation after the first one.

I am trying to create a typewriter animation for two specific paragraphs with different lengths and font sizes.

I want to customize the animation delay for each line so that the second paragraph starts typing only after the first finishes.

Solutions that use animation-delay or other modern techniques are welcome, but the existing duplicates do not address the unique requirements of this typewriter effect.

I modified one of your css class and added another keyframe and if my understanding is correct, you are looking for something like this?

.typewriter .p2{
  font-size: 3rem;
  animation: showAfter 3s, typing 3s steps(22) forwards 2.9s, blink 1s step-end infinite;
}

@keyframes showAfter {
    0% {
        opacity: 0;
    }
    
    99% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
}

A brief explanation is basically to hide .p2 for 3 seconds (same duration as .p1 animation) then play the typing animation before the full 3 seconds completes (2.9s delay).