Как убрать паузу между итерациями прокрутки бегущей строки в css?

Для того чтобы убрать паузу между итерациями прокрутки бегущей строки в CSS, мы можем использовать свойство animation.

Сначала мы создаем анимацию, используя правило @keyframes. В этой анимации мы определяем два состояния - начальное и конечное. Для пролистывания бегущей строки мы будем изменять значение свойства transform: translateX(), чтобы перемещать текст горизонтально.

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

Затем мы применяем эту анимацию к нашей бегущей строке с помощью свойства animation. Мы можем указать infinite для свойства animation-iteration-count, чтобы анимация выполнялась бесконечное количество раз.

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

В этом примере анимация будет выполняться в течение 10 секунд с линейной функцией распределения времени и будет повторяться бесконечное количество раз.

Однако, чтобы полностью удалить паузу между итерациями прокрутки бегущей строки, мы также можем установить animation-fill-mode в значение forwards, чтобы анимация оставалась в финальном состоянии после окончания одной итерации.

.marquee {
  animation: marquee 10s linear infinite;
  animation-fill-mode: forwards;
}

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

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

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.marquee {
  animation: marquee 10s linear infinite;
  animation-fill-mode: forwards;
}

Просто добавьте класс .marquee к элементу, который вы хотите сделать бегущей строкой, и он будет бесконечно прокручиваться без паузы между итерациями.