Как сложить изображения один поверх другого и сделать их бесконечным прокруткой с помощью css?

Question

Im пытается сложить 2 изображения 1 поверх другого и заставить их прокручивать бесконечно с помощью css. Я могу сделать прокрутку изображений, но не накладывать их один поверх другого и прокручивать с разных скоростей для создания эффекта.

Мой 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

я был в состоянии исправить это путем добавления style="position:absolute;z-index:0;" к первому ДИВ и position:absolute;z-index:1; ко второму DIV, который затем накладывают друг на друга друг на друга

Answer 2

изменить положение относительно абсолютного положения. , а также использовать z-index 1 и 2 для темы.)

#animate-area { 
     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:1; 

     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:absolute; 
     z-index:2; 
     animation: animatedBackground 80s linear infinite; 
    }