Эффект бегущей строки на CSS

Бегущая строка — это классический визуальный элемент, в котором текст непрерывно движется по экрану. В старом HTML для этого использовался тег <marquee>, но он устарел. Вместо него сейчас можно сделать более гибкую и красивую реализацию на CSS.

Это статья из цикла заметок по CSS анимации и эффектам.

Что мы будем использовать:

  • контейнер фиксированной ширины с overflow: hidden;
  • текстовый блок, который движется с помощью @keyframes и animation.

Пример того, как это выглядит (реализован также эффект остановки анимации при наведении):

Это бегущая строка на чистом CSS — просто и эффективно!

Вот пример на чистом CSS / HTML

Можно заменить 🔄 на любую SVG-иконку, например из Font Awesome или другого набора.

Стили:

Как это работает:

  • Анимация бесконечная, потому что стоит infinite, и равномерная — linear.
  • padding-left: 100% отодвигает текст вправо, за пределы контейнера.
  • transform: translateX(-100%) возвращает его влево, прокручивая через весь контейнер.

Проблема

Основная проблема этого эффекта, нужно задать адекватное время animation-duration. А оно зависит от длины текста, т.е. анимация не универсальна по отношению к разным текстам. Это можно решить различными программными способами через js или back-end, вычисляя и подменяя параметр animation-duration в стилях контейнера.

Вариации

Можно сделать движение в обратную сторону, просто поменяв направление анимации.

Можно увеличить время (animation-duration) для более медленного эффекта.

Добавить паузу при наведении (попробуйте в демке):

Мало букафф? Читайте есчо !

Плавное появление текста по буквам

Апрель 20, 2025 г.

Здесь мы разберем CSS анимацию - печатание слов по буквам. Это статья из цикла заметок по CSS анимации и эффектам. Это эффект, при котором текст появляется не весь сразу, а по одной букве, создавая ощущение "печати" или "набора текста". ...

Читать

Анимация: Изменение цвета текста при наведении

Май 2, 2025 г.

Когда пользователь наводит курсор на текст (например, ссылку, заголовок или кнопку), его цвет плавно меняется. Это один из самых простых, но эффективных способов добавить интерактивности и визуальной обратной связи на сайт. Это статья из цикла заметок ...

Читать

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать

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

Апрель 24, 2025 г.

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

Читать
 

Комментарии к «Эффект бегущей строки на CSS»

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



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