Necesito animar un grupo de elementos a lo largo de la página (desde la derecha deslizándose hacia la izquierda), pero en lugar de que esta sea una animación fluida, quiero que cada elemento esté centrado en el contenedor durante 1 segundo antes de que el siguiente elemento se deslice y luego el el elemento anterior se deslizaría fuera de la pantalla.

Cada elemento debe permanecer en el centro del contenedor durante 1 segundo antes de que el siguiente se deslice. Es un conjunto dinámico de elementos con anchos variados y un número dinámico de elementos. Y quiero que ya esté centrado el primer elemento del cual ya me he encargado.

No sé cómo animar esto con JavaScript para que cada elemento se centre durante 1 segundo a la vez antes de pasar al siguiente elemento.

No puedo hacer esto solo con animaciones/fotogramas clave CSS porque no sé cuántos fotogramas habría.

 window.onload = function() { const container = document.querySelector('.tabs'); const tabs = document.getElementsByClassName('tab'); // Calculate initial left offset const firstTab = tabs[0]; const initialOffset = (firstTab.offsetWidth / 2); container.style.left = 'calc(50% - ' + initialOffset + 'px)'; }

 section { text-align: center; width: 375px; background: white; margin: 0 auto; padding: 16px; position: relative; display: flex; overflow: hidden; } .tabs { display: flex; position: relative; margin: 0; padding: 0; list-style: none; } .tab { border-radius: 25px; background: gray; margin: 0 8px; text-align: center; height: 34px; display: inline-flex; align-items: center; padding: 0 16px; }

 <section> <ul class="tabs"> <li class="tab">Tab One</li> <li class="tab">Tab Two</li> <li class="tab">Tab Three</li> </ul> </section>