html - 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 个 li 元素并循环遍历它，尽管只有 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 */
    ...
}

第一个动画需要 0.8-1.0s 显示第一张图像，第三个动画在 2.8-3.0s 后隐藏图像，最后一个动画结束和开始之间有 3.6s-4.0s 的差距新动画。