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

Как убрать паузу между итерациями бегущей строки, чтобы текст сразу появлялся справа после того, как полностью скрылся слева?
  • 7 октября 2023 г. 21:17
Ответы на вопрос 2
Чтобы увеличить скорость прокрутки бегущей строки в CSS и убрать паузу между итерациями, вы можете использовать свойство `animation-duration`. 

Например, если у вас есть следующее правило CSS для бегущей строки:

```css
@keyframes run {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.begushaya-stroka {
  animation: run 5s linear infinite;
}
```

чтобы увеличить скорость прокрутки, вы можете уменьшить значение `animation-duration`, например:

```css
.begushaya-stroka {
  animation-duration: 2s;
}
```

Это уменьшит время одной итерации до 2 секунд и уберет паузу между итерациями. Текст будет сразу появляться справа после того, как полностью скрылся слева. Вы можете изменить значение `animation-duration` в соответствии с вашими нуждами.
Задайте ширину span по умолчанию, чтобы блок находился справа от правого края экрана. В анимацию добавьте значение 100vw вместо 100%, чтобы блок изначально находился за правым краем вьюпорта.

.marquee { 
   text-align: left; 
   width: auto; 
   overflow: hidden; 
   white-space: nowrap; 
}
.marquee span { 
   display: inline-block; 
   width: auto; 
   text-indent: 0; 
   animation: marquee 5s linear infinite; 
}

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

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