Эффект печатающегося текста

[StOK]

Подскажите, как сделать средствами CSS, но не скриптами, чтобы каждая строка начинала прописываться после того, как предыдущая закончила прописываться. Сейчас все строки прописываются одновременно.

HTML:

<p class="text-typing">1 строка</p>

<p class="text-typing">2 строка</p>

<p class="text-typing">3 строка</p>

<p class="text-typing">4 строка</p>

 

CSS:

.text-typing
{
    width: 21em;
    color:green;
    font-size: 22px;
    font-family: 'Marck Script', cursive;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(34, end);
    animation: type 5s steps(34, end);
    
}
@keyframes type{
    from { width: 0; }
}
 
@-webkit-keyframes type{
    from { width: 0; }
}
 

 

 

[Igor Schnaider]

Например так.

[StOK]

Большое спасибо за грамотное решение. В Вашем примере все отлично работает. Я пытаюсь прилепить этот код на страницу, сверстанную на ботстрапе через программку Mobirise. Там Ваше решение работает корректно в первой и второй строке. Третья и четвертая грузятся одновременно в первой. Не могли бы Вы подсказать, что может мешать корректной работе этого кода?

[Igor Schnaider]

Не знаю, соберите пример где-нибудь.