"Бегущая строка" - CSS3 анимация бесконечной прокрутки справа налево.
В последнее время всё больше работаю с PHP, вёрстки поменьше. Но тут встала задача сделать анимацию бесконечной прокрутки справа налево. Естественно, что никаких JS-скриптов специально для этого использовать не хочется. Первое, что пришло в голову - анимировать свойство transform: translateX(-100%). Но в поиске встречались самые разные варианты этой анимации, в большинстве случаев нужно было плодить вложенные "слайды", в то время как мне нужна была "бегущая строка" с элементом айдентики клиента.
Для меня выходом стала анимация свойства background-position. Нам нужен простой div.

<div class="scroll-container"></div>

И CSS

.wt_custom_menu_item_banner .scroll-container {
     width: 100%;
     background-image: url('/media/templates/site/*******/images/element.jpg');
     background-repeat: repeat-x;
     animation: scroll linear infinite 50s;
     height: 50px;
}

@keyframes scroll {
     from { background-position-x: 0; }
     to { background-position-x: -500%}
}

Скорость анимации регулируется параметром времени свойства animation: 50s. Чем больше время, тем медленнее движение. Но не только этим. На скорость анимации также влияет и свойство background-position-x: -500%;. Если положение, на которое мы меняем фон меньше, то анимация будет ещё медленнее, если больше, то при том же времени скорость увеличится. В общем, задачки за 2-3 класс )). Так же при достижении конца анимации (положения -500%) происходит подёргивание фона при возврате в исходное положение.
Тут выхода наверное 3: либо брать всё-таки скрипт на JS, либо использовать более мудрёное решение на CSS3, либо накрутить расстояния и время до таких значений, до которых их никто не будет просматривать )) Не думаю, что кто-то будет тупить на эту анимацию больше 50 секунд ))) Но это не точно )

#webdev #html #joomla #css #animation

@webtolkru