Good day. I want to implement a running line with text and a picture on the site. I have been suffering for a long time with the implementation itself. Came in a result when the line runs fine but breaks off at the end and starts over. The idea is that the line should not break and move with infinite spaces. Below I am attaching the code
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>
sass
.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%)