creating marquee type of design and animation in html css

Question

So I actually created a div as marquee but i tried like adding span elements inside of the marquee div as like

A1 B1 C1 D1

A2 B2 C2 D2

A3 B3 C3 D3

A4 B4 C4 D4

But it's starts from A3 and ends at B4 something like, and display blank space.

Thank you in advance.

I leave code below or here codepen link:

https://codepen.io/Vicky-clowdy/pen/KwPZyJP

#marquee {
  background-color: #bff747;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  position: relative;
  white-space: nowrap;
}

.track {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 15s linear infinite;
}

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

  100% {
    transform: translateX(-50%);
  }
}

#marquee span,
#marquee i {
  color: black;
  font-size: 40px;
  text-transform: capitalize;
  font-weight: 700;
  line-height: 1.2em;
}

#marquee .track i {
  margin: 0 30px;
}

​<div id="marquee">
  <div class="track">
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span> custom branding 1 </span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span> website design </span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span> digital marketing </span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span>strategy consulting</span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span> analytics & reporting </span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span> custom branding 2</span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span> website design </span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span> digital marketing </span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span>strategy consulting</span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span> analytics & reporting </span>
    </div>
  </div>
</div>

Answer 1

You are centring the track inside the marquee while the marquee has more width than the screen. This makes the first and last few divs out of the screen (that's why you cannot see the first element, and it seems like it is starting from the middle, not the beginning). Removing justify-content: center; will solve the problem

#marquee {
    justify-content: center;
}

#marquee {
  background-color: #bff747;
  display: flex;
  align-items: center;
  height: 120px;
}

.track {
  display: flex;
  animation: marquee 15s linear infinite;
}

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

  100% {
    transform: translateX(-50%);
  }
}

#marquee span,
#marquee i {
  color: black;
  font-size: 40px;
  text-transform: capitalize;
  font-weight: 700;
  line-height: 1.2em;
  text-wrap: nowrap;
}

#marquee .track i {
  margin: 0 30px;
}

.d-flex {
  display: flex;
}

.py-4 {
  padding-block: 16px;
}

<div id="marquee">
  <div class="track">
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span> custom branding 1 </span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span> website design </span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span> digital marketing </span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span>strategy consulting</span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span> analytics & reporting </span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span> custom branding 2</span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span> website design </span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span> digital marketing </span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span>strategy consulting</span>
    </div>
    <div class="d-flex flex-row align-items-center justify-content-between py-4">
      <i>*</i>
      <span> analytics & reporting </span>
    </div>
  </div>
</div>

(Some css properties were not needed since they had the default values.)