Мерцающий текст (blinking text) — это текст, который периодически исчезает и появляется, создавая эффект мигания. Такой приём можно использовать для временных уведомлений, подчёркивания чего-то важного или стилизации ретро-дизайнов.
Это статья из цикла заметок по CSS анимации и эффектам.
Основная идея
Анимация создаётся с помощью @keyframes
, где мы управляем opacity
. Мы делаем текст полностью видимым, затем полностью прозрачным — и повторяем это в цикле.
Пример, того как это выглядит:
Вот пример на чистом CSS / HTML
1 2 3 |
<span class="blinking-text"> Внимание! Осталось 2 места! </span> |
Стили
1 2 3 4 5 6 7 8 9 10 11 12 |
@keyframes css-animation-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .blinking-text { animation: css-animation-blink 1s infinite; } |
Настройки
- Скорость: Изменяйте
1s
вanimation: blink 1s infinite
на нужное значение (например,0.5s
для быстрого мигания или2s
— для медленного). - Поведение: Можно задать
animation-direction: alternate;
, если хотите чуть более плавный эффект. - Остановка: Добавьте класс с
animation: none;
чтобы отключить мерцание программно (например, через JavaScript).
UX-предупреждение
Слишком резкое или частое мерцание может раздражать пользователей или создавать дискомфорт (особенно при плохом освещении или эпилепсии). Используйте с осторожностью и по делу.