Как можно реализовать бесконечно прокручиваемый background на css?

Question

[DaniilKhanin]

Ссылка на Jsfiddle
Реализовал прокрутку bg, изображение bg сделано так чтобы можно было повторять по x, но не знаю как сделать чтобы не было прирывисто как у меня...
Думал поможет fill-mode, тоесть когда анимация дойдет до left -100% он сохранит значение и уже начнет новую (так как стоит infinite) с позиции -100% но увы...

#bg {
    width: 10500px;
    height: 100%;
    background: url('../img/bg/test.png') repeat-x;
    position: absolute;
    top: 0;
    background-size: 100% 100%;
    -webkit-animation: changewidth linear 5s infinite;
    animation: changewidth linear 5s infinite;
    animation-fill-mode: forwards;
}

@keyframes changewidth {
    from { left: 0}
    to { left: -100%}
}

Comments

[kulaeff]

Скачивать ваш архив никто не будет. Сделайте рабочий вариант на jsfiddle или codepen.

[DaniilKhanin]

kulaeff,
Вот ссылка Jsfiddle

Answer 1

[Сергей delphinpro]

https://jsfiddle.net/992dsxaj/2/

Comments

[DaniilKhanin]

не работает при background-size: 100% 100%

[Сергей delphinpro]

DaniilKhanin, Ну естественно =) Это особенность расчета координат для background-position

[Сергей delphinpro]

DaniilKhanin, Нужно включить смекалку =)
https://jsfiddle.net/992dsxaj/3/

[Сергей delphinpro]

Замечу, что немного усложнив разметку, но не меняя принцип, можно обойтись без специальной подготовки изображения. Это вам домашнее задание. Не справитесь — пишите, помогу, когда буду свободен =)