Анимация мерцающего текста на 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, 2021 г.

Об идее, командах и уроках программирования для малышей. Идея проекта Давным-давно, когда я учился в школе, несколько уроков информатики прошли ...

Читать

Анимация "Прыгающий элемент" (bounce)

Апрель 24, 2025 г.

Эффект подпрыгивания делает элемент визуально более "живым" и может привлечь внимание пользователя, особенно если использовать его на кнопке, иконке или уведомлении. Это статья из цикла заметок по CSS анимации и эффектам. Как работает bounce ...

Читать

 

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

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



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