Плавное появление текста по буквам

Здесь мы разберем CSS анимацию — печатание слов по буквам.

Это статья из цикла заметок по CSS анимации и эффектам.

Это эффект, при котором текст появляется не весь сразу, а по одной букве, создавая ощущение «печати» или «набора текста».

Такой эффект можно сделать несколькими способами. Один из самых простых — с помощью @keyframes и задержки (animation-delay) для каждой буквы.

Выглядит — это так (анимация начинается каждый раз при загрузке страницы).

П р и в е т э т о т  т е к с т  п о к а з а н  п о  б у к в а м .

Вот пример на чистом CSS и HTML:

Стили:

Можно генерировать такие span’ы на сервере или с помощью JavaScript, если текста много.

Эффект выглядит аккуратно, отлично подходит для заголовков, цитат, hero-текста на главной странице сайта, и вообще добавляет немного «оживлённости» даже самым статичным блокам.

Написать комментарий

Мало букафф? Читайте есчо !

Анимация нажатия: эффект нажатой кнопки

Май 2, 2025 г.

Когда пользователь нажимает кнопку, полезно дать тактильную обратную связь — например, слегка "прижать" её визуально. Такой эффект достигается с помощью изменения масштаба (scale) и вертикального смещения (translateY). Это статья из цикла заметок по ...

Читать

Эффект бегущей строки на CSS

Апрель 24, 2025 г.

Бегущая строка — это классический визуальный элемент, в котором текст непрерывно движется по экрану. В старом HTML для этого использовался тег <marquee>, но он устарел. Вместо него сейчас можно сделать более гибкую и красивую реализацию на CSS. ...

Читать

 

Комментарии к «Плавное появление текста по буквам»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: