Marquee Items Overlapping

Question

I am able to get the first two messages to slide properly without overlapping, and have modified code several times to try and achieve the same output for all marquee messages after the 2nd one.

The first 2 marquee messages appear as normal, without overlapping eachother. Im positive the issue lies within the keyframes but i can not get it to work.

body {
  background-color: black;
}

.marquee-footer.banner-text-overlay.text-center {
    margin-top: 10px!important;
    margin-bottom: 10px!important;
    height: 100px!important;
}
.marquee-footer {
  width: auto;
  height: 50px;
  margin: 25px auto;
  overflow: hidden;
  position: relative;
  margin: 25px auto;  
 
  background-color: transparent;
 
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.marquee-footer h1 {
  font-size: 40px;
  font-weight: 600;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
}
.marquee-footer h1 {
  transform:translateX(100%);
}
.free-yellow {
    color: #f4c715;
}
@keyframes left-one {
  0%  {
    transform:translateX(100%);
  }
  10% {
    transform:translateX(0);
  }
  40% {
    transform:translateX(0);
  }
  50% {
    transform:translateX(-100%);
  }
  100%{
    transform:translateX(-100%);
  }
}
@keyframes left-two {
  0% {
    transform:translateX(100%);
  }
  50% {
    transform:translateX(100%);
  }
  60% {
    transform:translateX(0);    
  }
  90% {
    transform:translateX(0);    
  }
  100%{
    transform:translateX(-100%);
  }
}

@keyframes left-three {
  0% {
    transform:translateX(100%);
  }
  50% {
    transform:translateX(100%);
  }
  60% {
    transform:translateX(0);    
  }
  90% {
    transform:translateX(0);    
  }
  100%{
    transform:translateX(100%);
  }
}






.marquee-footer h1:nth-child(1) {
  animation: left-one 10s ease infinite;
}
.marquee-footer h1:nth-child(2) {
  animation: left-two 10s ease infinite;
}
.marquee-footer h1:nth-child(3) {
  animation: left-three 10s ease infinite;
}
.desktopShow {
    display: block;
}
.desktopHide {
    display: none;
}
@media screen and (max-width: 800px) {
    .marquee-footer h1 {
  font-size: 34px;
  font-weight: 600;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
}
.desktopHide {
    display: block;
}
.desktopShow {
    display: none;
}
}
@media screen and (max-width: 500px) {
    .marquee-footer h1 {
  font-size: 24px;
  font-weight: 600;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
}
.desktopHide {
    display: block;
}
.desktopShow {
    display: none;
}
}
@media screen and (max-width: 414px) {
    .marquee-footer h1 {
  font-size: 26px;
  font-weight: 600;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 26px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
}
.footer-top {
    height: 100px!important;
}
.desktopHide {
    display: block;
}
.desktopShow {
    display: none;
}
}
@media screen and (max-width: 384px) {
    .marquee-footer h1 {
  font-size: 24px;
  font-weight: 600;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
}
.desktopHide {
    display: block;
}
.desktopShow {
    display: none;
}
}
@media screen and (max-width: 360px) {
    .marquee-footer h1 {
  font-size: 20px;
  font-weight: 600;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
}
.desktopHide {
    display: block;
}
.desktopShow {
    display: none;
}
}

<div class="marquee-footer banner-text-overlay text-center desktopShow">
        <h1>Over <span class="free-yellow">1 Million</span> Happy Customers</h1>
        <h1><span class="free-yellow">FREE</span> ECONOMY SHIPPING</h1>
          <h1><span class="free-yellow">THE ISSUE</span> IS HERE </h1>

      </div>
      <div class="marquee-footer banner-text-overlay text-center desktopHide">
        <h1>Over <span class="free-yellow">1 Million</span> Happy Customers</h1>
        <h1><span class="free-yellow">FREE</span> ECONOMY SHIPPING</h1>
      </div>

Answer 1

Basically you want each h1 to have the same animation behavior but at different times.

So in this snippet all three are given the animation keyframes left but there is a delay before starting the second one and a further delay before starting the third.

Each one is shown for a third of the total time of the animation and hidden (at -100% of its width) for the remaining two thirds of the time.

Obviously you can change the overall animation time and the %s within the range 0 to 33.3333% to suit. Note that is you have say 4 items then each gets shown for 25%, not 33.3333% and so on.

body {
  background-color: black;
  width: 100vw;
}

.marquee-footer.banner-text-overlay.text-center {
    margin-top: 10px!important;
    margin-bottom: 10px!important;
    height: 100px!important;
}
.marquee-footer {
  width: auto;
  width: 100%;
  height: 50px;
  margin: 25px auto;
  overflow: hidden;
  position: relative;
  margin: 25px auto;  
 
  background-color: transparent;
 
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.marquee-footer h1 {
  font-size: 40px;
  font-weight: 600;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
  animation: left 12s ease infinite;
  transform: translateX(100%);
}
.free-yellow {
    color: #f4c715;
}
@keyframes left {
  0%  {
    transform:translateX(100%);
  }
  8.3333% {
    transform:translateX(0);
  }
  25% {
    transform:translateX(0);
  }
  33.3333% {
    transform:translateX(-100%);
  }
  100%{
    transform:translateX(-100%);
  }
}

.marquee-footer h1:nth-child(2) {
  animation-delay: 4s;
}
.marquee-footer h1:nth-child(3) {
  animation-delay: 8s;
}
.desktopShow {
    display: block;
}
.desktopHide {
    display: none;
}
/*
@media screen and (max-width: 800px) {
    .marquee-footer h1 {
  font-size: 34px;
}
.desktopHide {
    display: block;
}
.desktopShow {
    display: none;
}
}
@media screen and (max-width: 500px) {
    .marquee-footer h1 {
  font-size: 24px;
}
}
@media screen and (max-width: 414px) {
    .marquee-footer h1 {
  font-size: 26px;
}
.footer-top {
    height: 100px!important;
}
}
@media screen and (max-width: 384px) {
    .marquee-footer h1 {
  font-size: 24px;
}
}
@media screen and (max-width: 360px) {
    .marquee-footer h1 {
  font-size: 20px;
}
}
*/

<div class="marquee-footer banner-text-overlay text-center desktopShow">
        <h1>Over <span class="free-yellow">1 Million</span> Happy Customers</h1>
        <h1><span class="free-yellow">FREE</span> ECONOMY SHIPPING</h1>
        <h1><span class="free-yellow">THE ISSUE</span> IS HERE </h1>
</div>

Note: you need to run the snippet in full screen on a wideish device as .desktopShow is set to display: none on narrower devices in the code given in the question.

The snippet also removes unneeded repetitions of some CSS to make things a bit clearer