How can create a correct marquee

Question

i've had this problem for so long could not fix on my own My marquee keeps having this gaps and empty spaces between each transitionX or some sort of lags if a duplicate the paragraphs

`.marquee {
  width: 100vw;
  height: 50px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.marquee p {
  display: inline-block;
  font-family: monospace;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 20px;
  white-space: nowrap;
}

.marquee-in {
  width: 100vw;
  -webkit-animation: trans 5s linear infinite;
  animation: trans 5s linear infinite;
  overflow: hidden;
  width: auto;
  height: auto;
  display: inline-flex;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

@-webkit-keyframes trans {
  0% {
    left: 0%;
  }
  100% {
    left: -100%;
  }
}`

codpen

I have tried various methods of diplicating the paragraph or making the animation duration matching the paragraph but nothing is working

Answer 1

You need to wrap each pair of the content in a separate element like that:

<div class="marquee-item">
  <p class="marq">Hello it's me Mario</p>
  <p class="asterisk marq">...</p>
</div>

and change keyframes to:

@-webkit-keyframes trans {
 0% {
   transform: translateX(0);
 }
 100% {
   transform: translateX(-274px);
 }
}

where 274px is a width of every item above. thus you moving only one item to the left infinitely.

codepen

i also removed width of the inner marquee wrapper and it's overflow