1

ここにリストをスライドするキーフレームがあります: 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; }
}

しかし、要素が 3 つしかないにもかかわらず、5 つの li 要素があり、それをループしているかのように見えます。

4

1 に答える 1

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.0 秒かかり、3 番目のアニメーションは 2.8 ～ 3.0 秒後に画像を非表示にします。これにより、最後のアニメーションの終了と新しいアニメーションの開始の間に 3.6 秒～4.0 秒のギャップが生じます。 .

于 2012-05-10T12:36:34.610 に答える