Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

139
Views
Problems with creeping line on the site

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%)
    
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

In the animation property you put on the div insert forwards at the end of the animation or type: animation-fill-mode: forwards; in the div element you can find more about animation-fill-mode property here reply to me if you have any more problems

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!