CSS Marquee 动画 - 在内容完全离开屏幕之前再次显示内容

Question

我有一个使用 css 动画选取框运行的选取框(是的)。

然而，客户希望它在屏幕右侧完全消失之前再次开始显示在屏幕左侧？

所以在它滑出之前重新开始。

这是一个 fiddle :https://jsfiddle.net/69b9uzks/

以及动画的 CSS:

.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

为此，您需要将 ul 分成 3 个单独的元素。

请注意，您需要计算每个元素的长度和时间以使其看起来不错。

.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>