CSS Marquee Scrolling Effect Not Working as Expected

I’m trying to create a marquee scrolling effect from left to right using CSS, but I can’t get it to work correctly. The content is supposed to scroll smoothly, but it doesn’t behave as expected in my implementation.

My Goal

I want to create a smooth, continuous scrolling effect, similar to the classic <marquee> HTML tag but using modern CSS. The text and images should scroll from left to right across the screen in a loop.

The Problem

When I apply my CSS, the scrolling effect doesn’t work smoothly, and sometimes the content doesn’t loop as intended. I’m not sure if the issue lies with the @keyframes animation, the width settings, or something else.

What I’ve Tried

Here’s the CSS and HTML I’m using:

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');

.iso-marquee {
  padding: 1.4rem 0;
  overflow: hidden;
  white-space: nowrap;
}

.iso-marquee--long {
  display: flex;
  justify-content: start;
  align-items: center;
  animation: iso-marquee 21s linear infinite;
  width: 2300px; /* Replace with your calculated total width */
  clear: both;
  padding-top: 45px;
  padding-bottom: 45px;
  border-bottom: 1px solid #121212;
  border-top: 1px solid #121212;
}

.marquee-container {
  display: flex;
  align-items: center;
  margin-right: 25px;
}

.TEES {
  font-family: 'Poppins', sans-serif;
  font-size: 85px;
  font-weight: 900;
  display: inline-block;
  margin-right: 2rem;
}

.branding {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

@keyframes iso-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .iso-marquee {
    animation: none;
  }
}
</style>

<div class="iso-marquee-linkwrap">
  <div class="iso-marquee--long iso-marquee">
    <img src="https://mrbeast.store/cdn/shop/files/photo_2023-06-29_02-49-55.jpg?height=85&v=1718170165" alt="" />
    <span class="TEES">TEES</span>
    <div class="branding">
      <span>MAKE YOUR</span>
      <span>MARK WITH</span>
      <span>EXCITISM</span>
    </div>
    <div class="marquee-container">
      <img src="https://mrbeast.store/cdn/shop/files/photo_2023-06-29_02-49-55.jpg?height=85&v=1718170165" alt="" />
      <span class="TEES">TEES</span>
      <div class="branding">
        <span>MAKE YOUR</span>
        <span>MARK WITH</span>
        <span>EXCITISM</span>
      </div>
    </div>
    <div class="marquee-container">
      <img src="https://mrbeast.store/cdn/shop/files/photo_2023-06-29_02-49-55.jpg?height=85&v=1718170165" alt="" />
      <span class="TEES">TEES</span>
      <div class="branding">
        <span>MAKE YOUR</span>
        <span>MARK WITH</span>
        <span>EXCITISM</span>
      </div>
    </div>
  </div>
</div>

What I Expect

I expect the above code to create a marquee effect similar to this one:

<style>
.marquee {
  margin: 2rem 0;
  font-size: clamp(4vw, 4rem, 8vw);
  overflow: hidden;
}

.marquee--long {
  font-size: 1.25rem;
}

.marquee span {
  display: inline-block;
  white-space: nowrap;
  color: #00112C;
  width: var(--tw);
  text-shadow: var(--tw) 0 currentColor,
               calc(var(--tw) * 2) 0 currentColor,
               calc(var(--tw) * 3) 0 currentColor,
               calc(var(--tw) * 4) 0 currentColor;

  will-change: transform;
  animation: marquee var(--ad) linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee div {
    animation: none;
    text-shadow: none;
    width: auto;
    display: block;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
  }
}
</style>
<div class="marquee" style="--tw: 40vw; --ad: 2.5s;">
  <span>Showreel</span>
</div>