Проблема с горизонтальной прокруткой текста с задержкой и появлением

Question

Когда я добавляю анимацию-задержку ко второму тексту, первый появляется без движения.И мне не удается бесконечный цикл прокрутки текста.Когда анимация заканчивается, всегда есть какой-то переломный момент.

Я пробовал несколько кодов, которые нашел в Интернете, но ни один из них не сделал именно то, что я хотел.

.scroll span {
  font-size: 1.5em;
  animation: scroll 20s linear infinite;
  position: absolute;
  top: 92vh;
  white-space: nowrap;
  overflow: hidden;
}

.second span {
  animation-delay: 10s;
}

@keyframes scroll {
  0% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(100%, 0);
  }
}

<div>
  <p class="scroll first"><span>scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down </span></p>
  <p class="scroll second"><span>scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down </span></p>
</div>

Я просто хочу бесконечный текст прокрутки.

Answer 1

Причина, по которой вы задерживаете свою вторую анимацию, заключается в том, что у вас установлена ​​анимация, установленная на значение от -100% до 100%, что по сути составляет 2 цикла анимации. В результате в анимации происходит разрыв пробела в течение примерно 1 цикла. Думайте об этом как о тексте, движущемся по кругу. От -100% до 0, текст перемещается на экране, но от 0 до 100%, текст за кадром возвращается к начальной точке. Ваша анимация должна быть от -100% до 0.

Вам также необходимо добавить display: inline-block и padding-left: 100% к .scroll span, чтобы теги 2 span оставались рядом.

.scroll {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  font-size: 1.5em;
  position: absolute;
  top: 92vh;
  white-space: nowrap;
}

.scroll span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 20s linear infinite;
}

.second span {
  animation-delay: 10s;
}

@keyframes scroll {
  0% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

<div>
  <p class="scroll">
    <span>scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down&nbsp;</span>
  </p>
  <p class="scroll second">
    <span> scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down&nbsp;</span>
  </p>
</div>