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

Question

[Newto]

Есть реализация бегущей строки:

<div class="marquee"><span>Текст бегущей строки</span></div>

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

@keyframes marquee {
    0%  { transform: translate(100%, 0); }
    100% { transform: translate(-100%, 0); }
}
</style>

Строка движется, но между каждой итерацией прокрутки проходит около двух секунд. Т.е. как только текст полностью скрывается за левым краем страницы, то снова справа он появляется только спустя паузу в ~2 секунды. Как сделать так что бы этой паузы не было?

see on codepan

Comments

[Виталий Першин]

Answer 1

[LJ322]

Потому что ваша анимация предполагает, что весь блок должен скрыться за левой частью экрана (он в вашем случае занимает 100% ширины экрана). Задайте 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); }
}

Comments

[Newto]

Понял свою ошибку благодаря вашему ответу, благодарю!