Мигание текста на CSS3: имитация old-school blink тега

Быстрый ответ

Для создания эффекта мерцания наилучшим решением будет использование возможностей CSS3, регулирующих видимость элемента через ключевые кадры @keyframes. Вместо задания opacity со значениями от 1 до 0 можно использовать следующий код:

@keyframes blink {
  0%, 100% { opacity: 1; } /* Элемент виден */
  50% { opacity: 0; }      /* Элемент мерцает и становится невидимым! */
}

.blink-text {
  animation: blink 1s step-end infinite; /* Позволяет тексту постоянно мигать */
}

Для активации этого эффекта добавьте класс .blink-text к соответствующим HTML-элементам:

<span class="blink-text">То я есть, то меня нет!</span>

Таким образом, текст будет равномерно мерцать каждую секунду, не создавая ненужного отвлекающего эффекта.

Раскройте весь свой потенциал с CSS

Медленно или быстро – управляйте скоростью мерцания

Вы полностью контролируете скорость мерцания. Чтобы изменить темп анимации, просто отрегулируйте значение animation-duration:

.fast-blink {
  animation-duration: 0.5s; /* Слишком быстрая анимация для нормального восприятия */
}

.slow-blink {
  animation-duration: 2s; /* Даже медленная анимация станет заметной */
}

Подробнее об этом расскажет наш спикер на видео

Кроссбраузерность: мы позаботились о поддержке!

Используйте вендорные префиксы, чтобы обеспечить корректную работу в различных браузерах:

@-webkit-keyframes blink {
  /* Здесь указываются правила анимации */
}

.blink-text {
  -webkit-animation: blink 1s step-end infinite; /* Для Safari и старых версий Chrome */
  animation: blink 1s step-end infinite;         /* Стандартное определение анимации */
}

Оптимизация производительности для ускорения работы сайта

.blink-text {
  transform: translateZ(0); /* Элемент остаётся на месте, но этот трюк повышает производительность */
}

Визуализация

При использовании анимации видимости создаётся визуальный эффект постоянного включения и выключения света:

/* CSS анимация для мягкого мерцания */
@keyframes smoothBlink {
  0%, 100% { opacity: 1; } /* Свет включён */
  50% { opacity: 0; }      /* Свет выключен */
}

Добавьте animation, чтобы создать увлекательный эффект мерцания:

.element {
  animation: smoothBlink 1s infinite; /* Вечное... действительно вечное мерцание? */
}

Вот как это выглядит:

До 💡💡💡💡 (Светлое и ясное пространство)
После 💡⚡🔅⚡💡⚡🔅⚡ (Эффект дискотечного освещения!)

Игра цветов сделает анимацию ещё более привлекательной

Добавление игры с цветами придаст мерцанию дополнительный интерес:

.color-blink {
  animation: colorChangeBlink 1s step-end infinite;
}

/* Цветастое мерцание */
@keyframes colorChangeBlink {
  0%, 100% { color: blue; }   /* В голубых оттенках */
  50% { color: transparent; } /* Момент исчезновения */
}

Сохраняйте строковый характер элементов

Используйте свойство display, чтобы текст оставался в пределах одной строки:

.blink-inline {
  display: inline; /* Поддерживаем порядок! */
  animation: blink 1s step-end infinite;
}

Sass: упрощаем работу с CSS

Если вы уже имеете навыки работы с Sass, воспользуйтесь его возможностями для эффективного контроля стилей и удобной работы с анимацией через миксины:

@mixin blink-animation($duration) {
  animation: blink $duration step-end infinite;
}

.blink-text {
  /* Несравненное сочетание мерцания и sass-стилизации! */
  @include blink-animation(1s);
}

Мерцание — сложный эффект, способный вызывать отвлекающий фон. Используйте его рационально.

Полезные материалы

1. Синтаксис анимации keyframes | CSS-Tricks – Подробное руководство по использованию CSS-анимаций с кадрами, ознакомьтесь с ним, чтобы оживить свой сайт.
2. @keyframes – CSS: Каскадные таблицы стилей | MDN – Официальная документация по атрибуту CSS @keyframes, станьте профессионалом в CSS-анимациях.
3. CSS Анимации – W3Schools – Пошаговое руководство по созданию анимаций в CSS3, подойдёт для начинающих.
4. Обнаружение завершения CSS-анимации с помощью JavaScript – Если вам необходимо определить момент окончания анимации.
5. Анимация | Codrops – Справочник по свойству CSS animation. Ваш надёжный путеводитель в мире CSS-анимаций!
6. Как отловить события анимации CSS3 в JavaScript — SitePoint – Про взаимодействие CSS3-анимаций с обработчиками JavaScript.