CSS: Прокрутка фона

Question

Я использую this site в качестве шаблона для своей страницы, но мне сложно сменить фоновое изображение. Я воссоздал только фон на этом jsFiddle. Текущий фон работает, потому что верхний цвет имеет один цвет, а стороны делают его похожим на непрерывное изображение.

Вот соответствующий CSS код:

0% { 
    -moz-transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
} 
100% { 
    -moz-transform: translate3d(-2250px, 0, 0); 
    -webkit-transform: translate3d(-2250px, 0, 0); 
    -o-transform: translate3d(-2250px, 0, 0); 
    -ms-transform: translate3d(-2250px, 0, 0); 
    transform: translate3d(-2250px, 0, 0); 
} 

Есть ли способ сделать это так, фоновые прокручивается вправо и когда он достигает конца, она прокручивается обратно влево? Очень сложно сделать изображение «непрерывным», когда оно прокручивается.

Answer 1

Это фактически практически та же функциональность, что и один из моих первых скриптов, используя свойство CSS right.

.wrapper { 
 
    width: 100%; 
 
    height: 400px; 
 
    text-align: right; 
 
    overflow: hidden; 
 
} 
 
.marquee { 
 
    -webkit-animation: rightLeft 20s linear infinite; 
 
    height: 100%; 
 
    display: block; 
 
    position: relative; 
 
} 
 
@-webkit-keyframes rightLeft { 
 
    0% { 
 
    right: 0; 
 
    } 
 
    50% { 
 
    right: 80%; 
 
    } 
 
    100% { 
 
    right: 0; 
 
    } 
 
}

<div class="wrapper"> 
 
    <img class="marquee" src="http://html5up.net/uploads/demos/aerial/css/images/bg.jpg" /> 
 
</div>