Как воспроизвести анимацию после завершения предыдущей? ⇐ CSS

[Anonymous]

Я пробовал анимацию пишущей машинки, и все прошло хорошо!

Код: Выделить всё

.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;
}
}

Код: Выделить всё

Hello, Welcome to CodePen!
Let's get started!

Но я не понимаю, как воспроизвести анимацию второй строки после первый.
Я пытаюсь создать анимацию пишущей машинки для двух конкретных абзацев с разной длиной и размером шрифта.
Я хочу настроить анимацию задержка для каждой строки, чтобы второй абзац начинал вводиться только после завершения первого.
Решения, использующие задержку анимации или другие современные методы, приветствуются, но существующие дубликаты не отвечают уникальным требованиям этого эффекта пишущей машинки.

Подробнее здесь: https://stackoverflow.com/questions/792 ... s-finished