Buenos días. Quiero implementar una línea continua con texto y una imagen en el sitio. He estado sufriendo durante mucho tiempo con la implementación en sí. Obtuvo un resultado cuando la línea funciona bien pero se rompe al final y comienza de nuevo. La idea es que la línea no se rompa y se mueva con espacios infinitos. A continuación adjunto el código.

html

 <div class="line-block"> <div class="line__wrapper"> <p class="line__text">Marketplace <br> Leader</p> <img src="images/general/logo.svg" alt="logo" class="line__img"> </div> <div class="line__wrapper"> <p class="line__text">Marketplace <br> Leader</p> <img src="images/general/logo.svg" alt="logo" class="line__img"> </div> <div class="line__wrapper"> <p class="line__text">Marketplace <br> Leader</p> <img src="images/general/logo.svg" alt="logo" class="line__img"> </div> </div> <div class="line-block"> <div class="line__wrapper"> <p class="line__text">Marketplace <br> Leader</p> <img src="images/general/logo.svg" alt="logo" class="line__img"> </div> <div class="line__wrapper"> <p class="line__text">Marketplace <br> Leader</p> <img src="images/general/logo.svg" alt="logo" class="line__img"> </div> <div class="line__wrapper"> <p class="line__text">Marketplace <br> Leader</p> <img src="images/general/logo.svg" alt="logo" class="line__img"> </div> </div> </div>

hablar con descaro a

 .line-infinite margin: 30px auto padding: 30px 0px display: flex justify-content: space-between align-items: center border-top: 1px solid #fff border-bottom: 1px solid #fff overflow: hidden div width: 200% display: flex justify-content: space-between animation: runline 5s linear infinite .line__block width: 100% .line__wrapper min-width: 33% display: flex justify-content: space-between align-items: center .line__text font-size: 32px line-height: 36px text-align: center margin: 0px 50px .line__img width: 200px @keyframes runline 0% transform: translateX(0%) 100% transform: translateX(-50%)