JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>animations issue</title>
  </head>

  <body>
    <button>Move</button>
    <div class="container"></div>
  </body>

</html>

CSS

.container {
        max-width: 60rem;
        display: flex;
        overflow: hidden;
      }

      .element {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        text-align: center;
        transition: transform .3s;
        background-color: #A67583;
      }

JavaScript

const container = document.querySelector('.container');
 for (let i = 1; i < 100; i++) {
   const div = document.createElement('div');
   div.classList.add('element');
   div.textContent = `Element ${i}`;
   container.appendChild(div);
 }
 let transition = 0;
 document.querySelector('button').addEventListener('click', () => {
   transition -= 100;
   [...document.querySelectorAll('.element')].forEach((element) => {
     element.style.transform = `translate3d(${transition}%, 0, 0)`;
   });
 });