Мерцающий текст (blinking text) — это текст, который периодически исчезает и появляется, создавая эффект мигания. Такой приём можно использовать для временных уведомлений, подчёркивания чего-то важного или стилизации ретро-дизайнов.
Это статья из цикла заметок по CSS анимации и эффектам.
Основная идея
Анимация создаётся с помощью @keyframes, где мы управляем opacity. Мы делаем текст полностью видимым, затем полностью прозрачным — и повторяем это в цикле.
Пример, того как это выглядит:
Внимание! Осталось 2 места!
Вот пример на чистом 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-предупреждение
Слишком резкое или частое мерцание может раздражать пользователей или создавать дискомфорт (особенно при плохом освещении или эпилепсии). Используйте с осторожностью и по делу.