Как воспроизвести анимацию после завершения предыдущей? ⇐ 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!

Но я не понимаю, как воспроизвести анимацию второй строки после первый.
Я попробовал анимацию-задержку, но она работает не так, как я думал.
Это также можно сделать с помощью JavaScript но я хотел знать, существуют ли какие-либо прямые методы, использующие атрибуты CSS.

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