Erstellen Sie eine umgekehrte Instanz meiner css @ -Webkit-Keyframes Animation

Question

Also, ich habe die unten. Welche ziert meine 3 ausgewählten Bilder vertikal als CSS-Bildkarussell (aus Hintergrundbildern). Ich versuche, eine zweite Instanz davon zu erstellen, die einen anderen Satz von 3 Bildern in der gegenüber Richtung züchtet. Das Umkehren der Zahlen von -600 bis 600 zum Beispiel funktioniert nicht. Irgendwelche Vorschläge?

---

Update für visuelle Klarstellung: Im Grunde versuche ich zwei Instanzen von diesen innerhalb der gleichen Mutter div zu erstellen. Der eine, den ich derzeit habe, funktioniert wie folgt: fiddle. Meine einzige Änderung ist, wie Sie sehen können, verwende ich Hintergrundbilder. Meine zweiten Instanzen dieser Ich möchte einfach in die entgegengesetzte Richtung scrollen, das ist alles - auch wenn meine Tweaks diesen Effekt nicht bekommen.

---

So diese nach oben Schiebe funktioniert. Wie kann ich den gegenteiligen Effekt erzielen?

@-webkit-keyframes scroll { 
     0% { margin-top: 0; } 
     30% { margin-top: 0 } 
     60% { margin-top: -600px; } 
     100% { margin-top: -1200px; } 
    } 

Vollständige CSS.

.left { 
     float:left; 
     border-right: 4px solid white; 
     overflow-x:hidden; 
     .items { 
      -webkit-animation: scroll 3s infinite; 
      -moz-animation: scroll 3s infinite; 
      -ms-animation: scroll 3s infinite; 
     } 
     @-webkit-keyframes scroll { 
      0% { margin-top: 0; } 
      30% { margin-top: 0 } 
      60% { margin-top: -600px; } 
      100% { margin-top: -1200px; } 
     } 
     @-moz-keyframes scroll { 
      0% { margin-top: 0; } 
      30% { margin-top: 0 } 
      60% { margin-top: -600px; } 
      100% { margin-top: -1200px; } 
     } 
     @-ms-keyframes scroll { 
      0% { margin-top: 0; } 
      30% { margin-top: 0 } 
      60% { margin-top: -600px; } 
      100% { margin-top: -1200px; } 
     } 
    #bg1 { 
     width: 670px; 
     height: 600px; 
     background: url(/../../../../wp-content/uploads/2016/11/left_hpslide2.jpg); 
     background-size: 100%; 
     background-repeat:no-repeat; 
     display: block; 
    } 
    #bg2 { 
     width: 670px; 
     height: 600px; 
     background: url(/../../../../wp-content/uploads/2016/11/left_hpslide3.jpg); 
     background-size: 100%; 
     background-repeat:no-repeat; 
     display: block; 
    } 
    #bg3 { 
     width: 670px; 
     height: 600px; 
     background: url(/../../../../wp-content/uploads/2016/11/left_hpslide1.jpg); 
     background-size: 100%; 
     background-repeat:no-repeat; 
     display: block; 
     } 
    } 

So, hier ist, wo ich derzeit in meinem Versuch einer zweiten Instanz bin.

.right { 
     float:right; 
     overflow-x:hidden; 
     .items { 
       -webkit-animation: upscroll 3s infinite; 
       -moz-animation: upscroll 3s infinite; 
       -ms-animation: upscroll 3s infinite; 
       overflow-x:hidden; 
      } 
      @-webkit-keyframes upscroll { 
       0% { margin-top: 0; } 
       30% { margin-top: 600 } 
       60% { margin-top: 1200px; } 
       100% { margin-top: 1800px; } 
      } 
      @-moz-keyframes upscroll { 
       0% { margin-top: 0; } 
       30% { margin-top: 600 } 
       60% { margin-top: 1200px; } 
       100% { margin-top: 1800px; } 
      } 
      @-ms-keyframes upscroll { 
       0% { margin-top: 0; } 
       30% { margin-top: 600 } 
       60% { margin-top: 1200px; } 
       100% { margin-top: 1800px; } 
      } 

Hier ist mein Aufschlag.

<div class="verticalbgslide"> 

<div class="left"> 

<div class="scrollable items"> 

<div id="bg1"></div> 
<div id="bg2"></div> 
<div id="bg3"></div> 

</div> 
</div> 

<div class="right"> 

<div class="scrollable items"> 

<div id="bg1"></div> 
<div id="bg2"></div> 
<div id="bg3"></div> 

</div> 
</div> 
</div> 

Answer 1

Einfach die tatsächlichen Frames umkehren. Der Schlüssel ist hier zu denken ist, dass der Rahmen selbst gleich zu sein braucht, um die Bilder nach dem HTML zur Verfügung gestellt zu zeigen, brauchen Sie nur den zu ändern, um die Animation zu ändern:

@-webkit-keyframes scroll { 
    0% { margin-top: -1000px; } 
27.33% { margin-top: -1000px; } 
    33.33% { margin-top: -500px; } 
60.66% { margin-top: -500px; } 
66.66% { margin-top: 0px; } 
94.99% { margin-top: 0px; } 
    100% { margin-top: -1000px; } 
} 

Hier ist ein Geige:

http://jsfiddle.net/c8u0h0o0/