Design Atlas
한국어
↝ Motion

Marquee

마퀴

Text or logos that scroll endlessly across the screen. It keeps the name of the old <marquee> HTML tag, but today it is built with a CSS animation.

Also known as: Scrolling textTicker
···
html
<div class="marquee"><div class="track">✦ DESIGN ATLAS &nbsp; ✦ MOTION &nbsp; ✦ EASING &nbsp; ✦ STAGGER &nbsp; ✦ DESIGN ATLAS &nbsp; ✦ MOTION &nbsp; ✦ EASING &nbsp; ✦ STAGGER &nbsp; </div></div>
css
.marquee{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden}
.track{display:inline-flex;white-space:nowrap;font:700 clamp(16px,5vmin,28px)/1 sans-serif;color:var(--fg);
  animation:scroll 9s linear infinite}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

Duplicate the content and place it side by side, then translateX by exactly half the total width and jump back to 0 — the seam becomes invisible and it loops forever. Use linear easing, or the speed will visibly pulse.

Common for logo walls, news tickers, and "now playing" strips. Pausing on hover with animation-play-state: paused gives readers a moment to catch up.

When to use

Don't rely on a marquee for anything important — the user can't read at their own pace. Keep it for decoration (logo walls) or secondary info.