Основная идея заключается в том, чтобы анимировать ширину элемента, содержащего наш текст, с нуля и до полного значения, увеличивая размер видимой области на один символ за раз. Фишка этой анимации в том, что конечную ширину нужно указать в ch. Сh указывает количество символов в строке. В данном случае у нас 17 символов, следовательно 17ch. width: 17ch; Ну а дальше всё просто. За определённый момент времени появляется каждый символ. В данном случае за 5 секунд. Мигающий курсор реализован с помощью прозрачности. PS Анимация взята из секретов Лия Веру.
Основная идея заключается в том, чтобы анимировать ширину элемента, содержащего наш текст, с нуля и до полного значения, увеличивая размер видимой области на один символ за раз.
Фишка этой анимации в том, что конечную ширину нужно указать в ch. Сh указывает количество символов в строке. В данном случае у нас 17 символов, следовательно 17ch.
width: 17ch;
Ну а дальше всё просто. За определённый момент времени появляется каждый символ. В данном случае за 5 секунд.
Мигающий курсор реализован с помощью прозрачности.
Результат
PS Анимация взята из секретов Лия Веру.