brand-marquee

Summary

Infinite horizontal logo strip running 20s linear via pure CSS keyframes. The track contains four duplicated .content-item blocks of five logos each; hover pauses the animation and edge gradients fade the ends to background.

HTML structure (minimal)

<div class="running-content mt-100">
  <div class="container">
    <div class="content-inner">
      <div class="content-lists running-animation">
        <div class="content-item">
          <a href="#" class="content-link"><img src="b1.png" /></a>
          <a href="#" class="content-link"><img src="b2.png" /></a>
          <a href="#" class="content-link"><img src="b3.png" /></a>
          <a href="#" class="content-link"><img src="b4.png" /></a>
          <a href="#" class="content-link"><img src="b5.png" /></a>
        </div>
        <div class="content-item"><!-- duplicate group for seamless loop --></div>
        <div class="content-item"><!-- duplicate group --></div>
        <div class="content-item"><!-- duplicate group --></div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.running-content .content-inner {
  overflow: hidden;
}
.running-content .content-lists {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 80px;
}
.running-content .content-lists:hover {
  animation-play-state: paused;
}
.running-content .content-item {
  display: flex;
  flex-shrink: 0;
  gap: 80px;
}
.running-animation {
  will-change: transform;
  animation: scroll 20s linear infinite;
}
.running-content .logos-background {
  background-image: linear-gradient(90deg, #e1e2ee, #1c253900 15% 85%, #e3e1ee);
  inset: 0%;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (max-width: 767px) {
  .running-animation { animation: scroll 5s linear infinite; }
}

Notable details

• Pure CSS, zero JavaScript — translate(0 -> -100%) on the flex row is enough because the row carries duplicates, so as the first set scrolls off, the next set is already in place.
• Duration drops to 5s on mobile so the marquee feels deliberately fast on short screens rather than crawling.
• linear-gradient mask trick: edges fade to surface color (#e1e2ee -> transparent at 15% -> back at 85%) so logos appear to dissolve rather than clip.

Use when

• Brand-logo strips, partner walls or testimonial company tickers — anywhere you want a self-running marquee without a library.
• Sections where you need predictable, accessible motion (hover-pause is built in, no prefers-reduced-motion plumbing required to disable).
• Use as a pattern when you want to avoid GSAP / Marquee.js for a single ticker.

Caveats

• For perfect seamless loop the duplicated set widths must add up to exactly the parent's overflow length — if you change logo count, recheck the keyframe % math (-100% assumes you have at least 2 duplicate groups).
• prefers-reduced-motion is not honored in the SCSS; add a guard if you need accessibility compliance.