Как в современных веб-проектах заменить устаревший HTML-тег <blink> на CSS?

Вместо HTML-тега <blink> для создания мигающего текста в современных веб-проектах используют CSS-анимации. forfrontend.ru

Один из способов — использование правила @Keyframes. www.tutorialspoint.com Оно позволяет создавать последовательность анимации на основе набора значений свойств CSS. www.tutorialspoint.com

Пример кода: www.bomberbot.com

.blink { animation: blinkAnim 1s steps(2, start) infinite; } @keyframes blinkAnim { 50% { opacity: 0; } }                                                                           www.bomberbot.com                      

Объяснение кода: www.bomberbot.com

1. Определён класс .blink, который применяет анимацию. www.bomberbot.com
2. Анимация определена в правиле @keyframes с именем blinkAnim. www.bomberbot.com
3. Внутри keyframes указано, что на 50% анимации прозрачность (opacity) должна быть 0 (полностью прозрачной). www.bomberbot.com
4. Функция steps() создаёт мгновенный переход между состояниями включения и выключения, похожий на оригинальный эффект тега <blink>. www.bomberbot.com
5. Анимация установлена на бесконечное повторение. www.bomberbot.com

Одно из преимуществ CSS-анимаций перед старым тегом <blink> — возможность полностью настроить эффект. www.bomberbot.com Например, можно изменить ключевые кадры и функции времени, чтобы создать различные вариации. www.bomberbot.com