Tengo un texto en bucle que obtuve de aquí CSS Scrolling Text Loop . El único problema es que después de un tiempo determinado (especificado como 5 segundos en css), el ciclo se interrumpe y comienza de nuevo, pero parece saltar en lugar de simplemente repetirse sin demora/salto. Intenté agregar un retraso de animación con la esperanza de que detuviera ese descanso, pero no funcionó. ¿Alguna idea de cómo puedo arreglar esto?

HTML

 <section class="home-text-loop"> <div class="loop-outer"> <div> <div class="loop-text"> <div class="loop-content">&nbsp;Hello World&nbsp;&middot; </div> </div> </div> </div> </section>

CSS

 .loop-outer { overflow: hidden; margin-top: 1rem; } .loop-outer div { display: inline-block; } .loop-text { white-space: nowrap; animation: loop-anim 5s linear infinite; animation-delay: 0.1s; font-size: 5rem; font-weight: 800; color: #fff; background: var(--matte-black); } @keyframes loop-anim { 0% { margin-left: 0; } 100% { margin-left: -50%; } }

JavaScript

 let outer = document.querySelector('.loop-outer'); let content = outer.querySelector('.loop-content'); repeatContent(content, outer.offsetWidth); let el = outer.querySelector('loop-text'); el.innerHTML = el.innerHTML + el.innerHTML; function repeatContent(el, till) { let html = el.innerHTML; let counter = 0; // prevents infinite loop while (el.offsetWidth < till && counter < 100) { el.innerHTML += html; counter += 1; } }