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

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

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

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

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

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

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

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

Стили:

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

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

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

Анимация: Поднятие элемента с тенью при наведении

Апрель 26, 2025 г.

Эта анимация создаёт эффект, будто элемент "приподнимается" над страницей, становясь более заметным. Обычно для этого используется свойство box-shadow, иногда в сочетании с лёгким смещением (transform: translateY(-2px)). Это статья из цикла заметок ...

Читать

Мигание курсора или другого элемента с помощью CSS

Апрель 29, 2025 г.

Мигание — простой и при этом заметный визуальный эффект. Чаще всего используется для имитации текстового курсора или привлечения внимания к какому-то элементу (например, "новинка", "онлайн", и т.д.). Это статья из цикла заметок по CSS анимации и эффектам. ...

Читать

Слайд-ин: элемент "въезжает" с края

Апрель 29, 2025 г.

Этот эффект часто используют для появления блоков на странице при загрузке или при прокрутке — например, когда карточка товара "въезжает" с левой или правой стороны. Он создаёт ощущение динамики и привлекает внимание. Это статья из цикла заметок по ...

Читать

Анимация: Изменение цвета текста при наведении

Май 2, 2025 г.

Когда пользователь наводит курсор на текст (например, ссылку, заголовок или кнопку), его цвет плавно меняется. Это один из самых простых, но эффективных способов добавить интерактивности и визуальной обратной связи на сайт. Это статья из цикла заметок ...

Читать
 

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

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



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