CSS Marquee animation - Show the content again before its completey off screen

Question

I have a marquee running (yep) using the css animation marquee.

The client however wants it to start showing again on the left side of screen before it is completely gone from the right?

So to start again before its finished sliding out.

here is a fiddle: https://jsfiddle.net/69b9uzks/

And the CSS for the animation:

.sliding-marquee ul {
    text-align: right;
    left: 0;
    top: 0;
    position: absolute;
    animation: marquee 20s linear infinite;
    -webkit-animation: marquee 20s linear infinite;
    white-space: nowrap;
    font-family: "futura-pt-n4","futura-pt",sans-serif;
}

@keyframes marquee {
    0%   { left: -1120px }
    100% { left: 105% }
}

@-webkit-keyframes marquee {
    0%   { left: -1120px }
    100% { left: 105% }
}

Answer 1

To do that you need to break up your ul into 3 individual items.

Note that you need to calc each items length and time to make it look good.

.sliding-marquee {
  width: 100%;
  height: 44px;
  background-color: #000;
  opacity: 0.6;
  color: white;
  line-height: 44px;
  position: absolute;
  left: 0;
  top: 105px;
  overflow: hidden;
  z-index: 100;
}

.sliding-marquee span {
  display: inline-block;
  font-size: 20px;
  text-transform: uppercase;
  position: absolute;
  font-weight: 500;
  left: -300px;
  width: 300px;
}

.sliding-marquee span:nth-child(1) {
  animation: marquee 9s linear infinite;
}
.sliding-marquee span:nth-child(2) {
  animation: marquee 9s linear infinite;
  animation-delay: 3s;
}
.sliding-marquee span:nth-child(3) {
  animation: marquee 9s linear infinite;
  animation-delay: 6s;
}

@keyframes marquee {
  0%   { left: -300px }
  100% { left: 105% }
}

<div class="sliding-marquee">
  <span>Stores Opened</span>
  <span>Brands Approved</span>
  <span>Regions supplied</span>
</div>