Анимация мерцающего текста на CSS

Мерцающий текст (blinking text) — это текст, который периодически исчезает и появляется, создавая эффект мигания. Такой приём можно использовать для временных уведомлений, подчёркивания чего-то важного или стилизации ретро-дизайнов.

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

Основная идея

Анимация создаётся с помощью @keyframes, где мы управляем opacity. Мы делаем текст полностью видимым, затем полностью прозрачным — и повторяем это в цикле.

Пример, того как это выглядит:

Внимание! Осталось 2 места!

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

Стили

Настройки

  • Скорость: Изменяйте 1s в animation: blink 1s infinite на нужное значение (например, 0.5s для быстрого мигания или 2s — для медленного).
  • Поведение: Можно задать animation-direction: alternate; , если хотите чуть более плавный эффект.
  • Остановка: Добавьте класс с animation: none; чтобы отключить мерцание программно (например, через JavaScript).

UX-предупреждение

Слишком резкое или частое мерцание может раздражать пользователей или создавать дискомфорт (особенно при плохом освещении или эпилепсии). Используйте с осторожностью и по делу.

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

Служебные команды чертежника

Март 6, 2025 г.

Две полезные команды, могут вам помочь в работе чертежника. Пауза между выполнением команд.Для анимации нужно время, и потому Джек делает паузу между командами - 1 секунду. Это время можно варьировать в диапазоне от 0.001 до 10 секунд. Для этого ...

Читать

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

Апрель 29, 2025 г.

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

Читать

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

Апрель 29, 2025 г.

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

Читать

Медленное вращение — добавим динамики логотипу

Апрель 24, 2025 г.

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

Читать
 

Комментарии к «Анимация мерцающего текста на CSS»

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



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