How to Build an Infinite Marquee with CSS

A seamless marquee is different from a single element moving from one edge to the other. To remove the empty gap, place two identical presentation tracks next to each other and animate the combined strip by exactly one track width.

Structure

<div class="loop" aria-label="Alpha · Beta · Gamma">
  <div class="loop__track">
    <div class="loop__group">Alpha · Beta · Gamma</div>
    <div class="loop__group" aria-hidden="true">Alpha · Beta · Gamma</div>
  </div>
</div>

The duplicated group is for visual continuity only, so aria-hidden="true" prevents it from being announced twice.

Animation

.loop { overflow: hidden; }
.loop__track {
  display: flex;
  width: max-content;
  animation: loop-left 16s linear infinite;
}
.loop__group { flex: none; padding-right: 3rem; }
@keyframes loop-left {
  to { transform: translateX(-50%); }
}

The exact percentage is correct only when the two groups are equal width and the track contains nothing else. A production generator should build the structure consistently rather than asking the user to calculate the offset.

Logo strips

For logos, place each logo inside a group and preserve intrinsic aspect ratio. The same duplicated-track pattern creates a continuous sponsor strip. The Brand Logos Scroller generates this structure and provides alt-text and link fields for each logo.

Reduced motion

When reduced motion is requested, disable the animation and allow the content to wrap or scroll manually. The information should remain available without movement.