Біжуча лінія — CSS анімація (Маркі) з готовим HTML і CSS кодом

Превʼю

CSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-ready

HTML + CSS

<div class="marquee">
  <div class="marquee__track">
    <div class="marquee__lane">
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
    </div>
    <div class="marquee__lane" aria-hidden="true">
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
    </div>
  </div>
</div>

<style>
.marquee {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(120deg, #0f172a, #0b253f);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.marquee::after,
.marquee::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.marquee::before {
  background: linear-gradient(90deg, #0f172a 0%, transparent 14%, transparent 86%, #0f172a 100%);
}

.marquee::after {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: inherit;
  inset: 6px;
}

.marquee__lane {
  display: flex;
  gap: 32px;
  padding: 16px 22px;
  font-size: 14px;
  color: #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: max-content;
  flex-shrink: 0;
}

.marquee__lane span {
  white-space: nowrap;
  color: rgba(226, 232, 240, 0.86);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: scroll 28s linear infinite;
  will-change: transform;
}

@keyframes scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
</style>

Що таке CSS ticker і чому він працює

Ticker — це безперервна біжуча строка, яка додає інтерфейсу ритм і допомагає показати багато коротких повідомлень без перевантаження макета. Такий патерн добре працює в hero-блоках, новинних стрічках, промо секціях і компонентах з довірою до бренду, де важливо підтримувати рух і увагу.

Де використовувати біжучу строку в реальному продукті

Найкращі сценарії для ticker — оновлення статусів, маркетингові меседжі, перелік послуг, короткі оголошення й декоративні інформаційні доріжки. Щоб анімація не заважала читанню, краще тримати помірну швидкість, достатній контраст тексту та стабільний ритм без різких стрибків.

Як адаптувати приклад під свій UI

У цьому прикладі ви можете змінити текстові блоки, відступи, тривалість циклу та кольорову схему, щоб компонент виглядав як частина вашої дизайн-системи. Для продакшену варто додати паузу при hover і зменшення руху через prefers-reduced-motion, щоб компонент залишався доступним і комфортним.

Інші анімації для цього сценарію

Вертикальний скрол Тікер новин