Creé una sección de un sitio web que muestra los logotipos de los socios de la empresa y se desplaza horizontalmente automáticamente.

Normalmente, cuando llega al final de la lista de iconos, se supone que la animación se reproducirá desde el principio sin problemas, pero esto no sucede en mi implementación. En cambio, hay una pausa repentina y la animación comienza repentinamente desde el principio.

Por favor, ¿cómo puedo solucionar esto? a continuación está mi código

modelo

 <div class="ref-jumbo-content"> <div class="ref-jumbo-content-container"> <div class="ref-jumbo-content-layout"> <img v-for="(logo, index) in logos" :key="index" :src="require(`@/assets/svg/${logo}`)" :alt="logo" > <img v-for="(logo, index) in logos" :key="index*111" :src="require(`@/assets/svg/${logo}`)" :alt="logo" > </div> </div> </div>

mi script NuxtJs, aquí es donde se cargan los íconos

 <script> export default { data() { return { logos : [ 'bbcradio.svg', 'glamour.svg', 'metro.svg', 'skynews.svg', 'theguardian.svg', 'theindependent.svg', 'thesun.svg', 'thetelegraph.svg', // 'thevoice.svg' ] } } } </script>

y debajo está mi CSS y donde se realiza la animación

 <style> .ref-jumbo-content { position: relative; width: 100%; height: 90px; } .ref-jumbo-content-container { position: relative; width: 100%; height: 100%; overflow-x: scroll; overflow-y: hidden; } .ref-jumbo-content-container::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .ref-jumbo-content-container { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .ref-jumbo-content-layout { height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; position: absolute; animation: marquee 10s linear infinite; } .ref-jumbo-content-layout img { padding: 0 40px; } @keyframes marquee { 0% { /* transform: translate(0); */ left: 0; } 100% { /* transform: translate(0); */ left: -100%; } } /* small screen */ @media only screen and (max-width: 950px) { .ref-jumbo-content-layout img { padding: 0 20px; } } </style>