Scrolling message one by one in CSS keyframes

Question

How can I scroll the messages one by one with CSS keyframes or with js I use ( white-space with nowrap ) but is not working

.marquee-wrap {
  overflow: auto;
  margin: 0 auto;
  height: 80px;
  border: 1px solid #000;
  padding: 10px;
  font-size: 18px;
  line-height: 1.6;
}


/* increase duration to speed up scroll */

.marquee {
  animation: scrollUp 10s linear 1s infinite;
}

@supports (transform:translate3d(0px, 0px, 0px)) {
  .marquee-wrap {
    overflow: hidden;
  }
  .marquee {
    padding-top: 160px;
    white-space: nowrap;
  }
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .marquee-wrap {
    overflow: hidden;
  }
  /* ie11 hack */
  .marquee {
    padding-top: 160px;
  }
}

@keyframes scrollUp {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}

.marquee:hover {
  animation-play-state: paused
}

<div style="width: 100%; opacity: 0.5; background-color: rgb(255, 0, 0);color:white;">
  <div class="marquee-wrap">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true" too="" style="float: right;">×</button>
    <div>
      <div class="marquee">
        <div>Rogue, inconspicuous motes of rock and gas descended from astronomers Sea of Tranquility billions upon billions
        </div><br>
        <div>Radio telescope cosmic ocean colonies consciousness, Hypatia! Culture. Prime number light years Hypatia.
        </div>

      </div>
    </div>
  </div>
</div>

I have tried all the options of this css code, but no one makes what I need.

Thank you

Answer 1

You could add padding to the bottom of the div equal to the height of the marquee - then the text will go out of view before the next one appears:

.marquee-wrap {
  box-sizing:border-box;    /* add this so the marquee wrapper 80px height - if you want it to be 100px,just change this and the padding below */
  overflow: auto;
  margin: 0 auto;
  height: 80px;
  border: 1px solid #000;
  padding: 10px;
  font-size: 18px;
  line-height: 1.6;
}


/* increase duration to speed up scroll */

.marquee {
  animation: scrollUp 10s linear 1s infinite;
}

.marquee > div {
  padding-bottom:80px; /* height of mmarquee */
}
.marquee > div:last-child {
  padding-bottom:0;   /* reduces the time between animations */
}

@supports (transform:translate3d(0px, 0px, 0px)) {
  .marquee-wrap {
    overflow: hidden;
  }
  .marquee {
    padding-top: 160px;
  }
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .marquee-wrap {
    overflow: hidden;
  }
  /* ie11 hack */
  .marquee {
    padding-top: 160px;
  }
}

@keyframes scrollUp {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}

.marquee:hover {
  animation-play-state: paused
}

<div style="width: 100%; opacity: 0.5; background-color: rgb(255, 0, 0);color:white;">
  <div class="marquee-wrap">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true" too="" style="float: right;">×</button>
    <div>
      <div class="marquee">
        <div>
            Rogue, inconspicuous motes of rock and gas descended from astronomers Sea of Tranquility billions upon billions
        </div>
        <div>
            Radio telescope cosmic ocean colonies consciousness, Hypatia! Culture. Prime number light years Hypatia.
        </div>
      </div>
    </div>
  </div>
</div>