我有关键帧可在此处浏览列表: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个元素。
最佳答案
这是您的问题(动画时间为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的间隔。 。
关于html - CSS3关键帧包含5张幻灯片,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10533853/