CSS3キーフレーム私はここに私のリストをスライドさせるキーフレームを持っている5枚のスライド

Question

を取りますjsFiddle

HTML

<div id="merch" class="block"> 
    <h2>MERCH</h2> 
    <div class="content"> 
     <div id="merchContainer"> 
     <ul class="merchItems"> 
      <li class="merch small item1 firstmerch"> 
      <div class="merchImg"> 
       <a href="/" target="_blank"><img src="http://images.wikia.com/recipes/images/1/15/Red_Apple.jpg"></a> 
       <div class="merchZoomIcon"></div> 
      </div> 
      <div class="merchDetail"> 
       <div class="merchPriceWrapper"> 
       <div class="merchName"> 
        <a href="/" target="_blank">Apple</a> 
       </div> 
       <div class="merchPrice">$5.00</div> 
       </div> 
       <div class="merchBuy"> 
       <a class="merchBuyLink button" href="/" target="_blank">BUY NOW</a> 
       </div> 
      </div> 
      </li> 
      <li class="merch small item2 secondmerch"> 
      <div class="merchImg"> 
       <a href="/" target="_blank"><img src="http://www.joemcalpine.com/wp-content/uploads/2012/04/orange2.jpg"></a> 
       <div class="merchZoomIcon"></div> 
      </div> 
      <div class="merchDetail"> 
       <div class="merchPriceWrapper"> 
       <div class="merchName"> 
        <a href="/" target="_blank">Orange</a> 
       </div> 
       <div class="merchPrice">$45.00</div> 
       </div> 
       <div class="merchBuy"> 
       <a class="merchBuyLink button" href="/" target="_blank">BUY NOW</a> 
       </div> 
      </div> 
      </li> 
      <li class="merch small item3 thirdmerch"> 
      <div class="merchImg"> 
       <a href="/" target="_blank"><img src="http://www.mangomaven.com/wp-content/uploads/2011/02/manilla1.jpg"></a> 
       <div class="merchZoomIcon"></div> 
      </div> 
      <div class="merchDetail"> 
       <div class="merchPriceWrapper"> 
       <div class="merchName"> 
        <a href="/" target="_blank">Mango</a> 
       </div> 
       <div class="merchPrice">$1.29</div> 
       </div> 
       <div class="merchBuy"> 
       <a class="merchBuyLink button" href="/" target="_blank">$1.29</a> 
       </div> 
      </div> 
      </li> 
     </ul> 
     </div> 
    </div> 
</div> 

CSS

/*MERCH*/ 
#merch { 
    height: 325px; 
    width: 304px; 
    margin: 0 auto; 
    overflow: visible; 
    position: relative; 
} 
#merch img { 
    display: block; 
    height: 240px; 
    width: 287px; 
} 
#merch .content { 
    height: 340px; 
    overflow: hidden; 
} 
#merch ul.merchItems { 
    position: relative; 
} 
#merch li { 
    width: 304px; 
    height: 340px; 
    position: absolute; 
    right: -345px; 
    list-style: none; 
} 
#merch li.firstmerch { 
    -moz-animation: merchone 5s linear infinite; 
    -webkit-animation: merchone 5s linear infinite; 
} 
#merch li.secondmerch { 
    -moz-animation: merchtwo 5s linear infinite; 
    -webkit-animation: merchtwo 5s linear infinite; 
} 
#merch li.thirdmerch { 
    -moz-animation: merchthree 5s linear infinite; 
    -webkit-animation: merchthree 5s linear infinite; 
} 
#merch:hover li { 
    -moz-animation-play-state: paused; 
    -webkit-animation-play-state: paused; 
} 
@-moz-keyframes merchone { 
    0% { right:0px; } 
    4% { right:0px; } 
    16% { right:0px; opacity:1; z-index:0; } 
    20% { right:345px; opacity:0; z-index:0; } 
    21% { right:-345px; opacity:0; z-index:-1; } 
    92% { right:-345px; opacity:0; z-index:0; } 
    96% { right:-345px; opacity:0; } 
    100%{ right:0px; opacity:1; } 
} 
@-moz-keyframes merchtwo { 
    0% { right:-325px; opacity:0; } 
    16% { right:-325px; opacity:0; } 
    20% { right:0px; opacity:1; } 
    24% { right:0px; opacity:1; } 
    36% { right:0px; opacity:1; z-index:0; } 
    40% { right:345px; opacity:0; z-index:0; } 
    41% { right:-345px; opacity:0; z-index:-1; } 
    100%{ right:-345px; opacity:0; z-index:-1; } 
} 
@-moz-keyframes merchthree { 
    0% { right:-345px; opacity:0; } 
    36% { right:-345px; opacity:0; } 
    40% { right:0px; opacity:1; } 
    44% { right:0px; opacity:1; } 
    56% { right:0px; opacity:1; } 
    60% { right:345px; opacity:0; z-index:0; } 
    61% { right:-345px; opacity:0; z-index:-1; } 
    100%{ right:-345px; opacity:0; z-index:-1; } 
} 
@-webkit-keyframes merchone { 
    0% { right:0px; } 
    4% { right:0px; } 
    16% { right:0px; opacity:1; z-index:0; } 
    20% { right:345px; opacity:0; z-index:0; } 
    21% { right:-345px; opacity:0; z-index:-1; } 
    92% { right:-345px; opacity:0; z-index:0; } 
    96% { right:-345px; opacity:0; } 
    100%{ right:0px; opacity:1; } 
} 
@-webkit-keyframes merchtwo { 
    0% { right:-325px; opacity:0; } 
    16% { right:-325px; opacity:0; } 
    20% { right:0px; opacity:1; } 
    24% { right:0px; opacity:1; } 
    36% { right:0px; opacity:1; z-index:0; } 
    40% { right:345px; opacity:0; z-index:0; } 
    41% { right:-345px; opacity:0; z-index:-1; } 
    100%{ right:-345px; opacity:0; z-index:-1; } 
} 
@-webkit-keyframes merchthree { 
    0% { right:-345px; opacity:0; } 
    36% { right:-345px; opacity:0; } 
    40% { right:0px; opacity:1; } 
    44% { right:0px; opacity:1; } 
    56% { right:0px; opacity:1; } 
    60% { right:345px; opacity:0; z-index:0; } 
    61% { right:-345px; opacity:0; z-index:-1; } 
    100%{ right:-345px; opacity:0; z-index:-1; } 
} 

しかし、それがある数えるかのように表示されます5つの要素とループがありますが、要素は3つしかありません。

Answer 1

これは問題である（時間が5秒のアニメーション期間を与えられている）：

@-webkit-keyframes merchone { 
    ... 
    16% { right:0px; opacity:1; z-index:0; }  /* 0.8 sec */ 
    20% { right:345px; opacity:0; z-index:0; } /* 1.0 sec */ 
    ... 
} 
@-webkit-keyframes merchtwo { 
    ... 
} 
@-webkit-keyframes merchthree { 
    ... 
    56% { right:0px; opacity:1; }    /* 2.8 sec */ 
    60% { right:345px; opacity:0; z-index:0; } /* 3.0 sec */ 
    ... 
} 

最初のアニメーションは、第1の画像を表示するため0.8-1.0sをとり、そして第三のアニメーションが2.8-後の画像を隠し3.0sを組み合わせると、最後のアニメーションの終わりと新しいアニメーションの開始の間に3.6s-4.0sのギャップができます。