my css @ -webkit-keyframesアニメーションの逆インスタンスを作成する

Question

私は以下のようにします。 3つの選択された画像をCSS画像カルーセル（背景画像から）として垂直にマーキーします。私はの方向にあるの3つの画像の異なるセットをマーキーするこの2番目のインスタンスを作成しようとしています。例えば、-600から600への数値の反転は機能しません。助言がありますか？

---

視覚的明確化のための更新：は基本的に私は、同じ親のdivの中に、この2つのインスタンスを作成しようとしています。私は現在、このような機能を持っています。fiddle。私の唯一の変更は、私が背景画像を使用しているのがわかるようにです。私の2番目の例反対方向にスクロールしたいだけです。、それだけですが、私の調整ではこの効果が得られません。だから、

---

、これは上向きスライド動作します。反対の効果を得るにはどうすればいいですか？

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

フルCSS。私は2番目のインスタンスで私の試みの中に、現在でよどこ

.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; 
     } 
    } 

だから、ここにあります。

.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; } 
      } 

ここに私のマークアップがあります。

<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

実際のフレームを逆転するだけです。ここだ

@-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; } 
} 

：考えるここで重要なことは、フレーム自体は提供されたHTMLに応じて画像を表示同じにする必要があるということです、あなただけのアニメーションを変更するためを変更する必要がありますフィドル：

http://jsfiddle.net/c8u0h0o0/