How can I eliminate big black space in this animation-CodePudding

I'm actually working in my final project for my full stack career, and I'm finishing all the details.

I've created this infinite looped animation, and I would like to eliminate the black space.

This is my code:

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 100000;
  background-color: black;
  margin-top: 25px;
  /* transform: rotate(1deg); */
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
  color: #c9c9c9;
  font-family: nos;
}

.marquee2 span {
  animation-delay: 0s;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

<p >
  <span>KURT BURGERS BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;</span>
</p>
<p >
  <span>KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGER&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;</span>
</p>

You can watch the animation here: https://codepen.io/pipe-pouyssegur/pen/xxWLwoW

Im using this post animation: Pure CSS Continuous Horizontal Text Scroll Without Break

CodePudding user response：

The padding-left: 100% makes for the initial black space, and the subsequent black space, as the animation starts at 0, which is where the padding starts.

In the following code, I've removed that padding and changed where the animation stops so that there should be no gap.

You may need to play with the value, depending on the number of KURT BURGERS     repetitions you have, and the width of the viewport. In fact, you might need to use some media queries to set it correctly depending on viewport width.

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 100000;
  background-color: black;
  margin-top: 25px;
  /* transform: rotate(1deg); */
}

.marquee span {
  display: inline-block;
  /*padding-left: 100%;*/
  animation: marquee 10s linear infinite;
  color: #c9c9c9;
  font-family: nos;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-55.25%);
  }
}

<p >
  <span>KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS</span>
</p>

CodePudding user response：

Looking at the code I can speculate about various things you did that might not have the desired effect, starting with the fact the p.marquee is hidden behind p.marquee.marquee2 Also both animations are totally the same.

As I don't really understand what it is you want to achieve it's hard to tell you where to start. Maybe you can clarify ab it about your intended outcome.

Edit: I take an educated guess after your comment:

What you want is that the second element is visibly moving after/behind the fists, so that the Illusion of one continuous movement is achieved?

There are several problems in you setup if that's what you want:

It could only work if your spans would cover the whole width of the parent element. there is no guarantee that the will.

As stated you hide one p element behind the other. Set the bachground-color of the top element (in the visual stacking order) to transparent.

Or even better only use one p with two spans.

You would have to place the second span 'behind' the first - which is hard, as you don't know the width of the first - putting them inside the same parent can help, but as you have the first problem I mentioned, that will be hard to solve. Some advanced flexbox or grid magic could probably do it, but I guess that would be the wrong way to go about the setup.