如何在jQuery中無限水平滾動圖像？

Question

我試圖在另一層上疊加2個圖像1，並使它們使用jQuery無限滾動。我能夠使圖像在CSS中滾動和圖層，但動畫變得非常生澀。我如何使用jQuery在圖像上創建無限水平滾動並保持動畫平滑？

到目前爲止我的代碼：

CSS：

@keyframes animatedBackground { 
    from { background-position: 0 0; } 
    to { background-position: 100% 0; } 
} 

#animate-area { 
    width: 100vw; 
    height: 100vw; 
    background-image: url(http://oi64.tinypic.com/2r7ri29.jpg); 
    background-position: 0px 0px; 
    background-repeat: repeat-x; 

    animation: animatedBackground 135s linear infinite; 
} 

#animate-area2 { 
    width: 100vw; 
    height: 100vw; 
    background-image: url(http://oi67.tinypic.com/2niy905.jpg); 

    background-repeat: repeat-x; 
    position: relative; 
    animation: animatedBackground 80s linear infinite; 
} 

和HTML：

<div id="animate-area"></div> 
<div id="animate-area2"></div> 

JSFiddle

Answer 1

檢查出來。也許你會喜歡它。

https://jsfiddle.net/hnxnjzaq/3/

基本上只是使用翻譯代替背景位置。

@keyframes animatedBackground { 
from { transform: translateX(0); } 
to { transform: translateX(100%); } 
} 

只需根據需要調整速度即可。

Answer 2

更改

@keyframes animatedBackground { 
    from { background-position: 0 0; } 
    to { background-position: 100% 0; } 
} 

到：

@keyframes animatedBackground { 
    from { background-position: -100% 0; } 
    to { background-position: 100% 0; } 
} 

的片段：

body { 
 
    background-color: black; 
 
} 
 

 
@keyframes animatedBackground { 
 
    from { background-position: -100% 0; } 
 
    to { background-position: 100% 0; } 
 
} 
 

 
#animate-area \t { 
 
    width: 100vw; 
 
    height: 100vw; 
 
    background-image: url(http://oi64.tinypic.com/2r7ri29.jpg); 
 
    background-position: 0px 0px; 
 
    background-repeat: repeat-x; 
 
    position:absolute;z-index:-2; 
 

 
    animation: animatedBackground 135s linear infinite; 
 
} 
 

 
#animate-area2 \t { 
 
    width: 100vw; 
 
    height: 100vw; 
 
    background-image: url(http://oi67.tinypic.com/2niy905.jpg); 
 
    position:absolute;z-index:-1; 
 

 
    background-repeat: repeat-x; 
 
    position: relative; 
 
    animation: animatedBackground 80s linear infinite; 
 
}

<div id="animate-area"></div> 
 
<div id="animate-area2"></div>