Question

我想从一个教程中学习，但我搞砸了...... 似乎幻灯片中的一些图像在第一个循环后重叠。我不知道为什么它再也没有显示第一张照片。帮助将不胜感激......

            <div class="slides">
<ul><!-- slides -->
    <li><img src="http://cdn.imghack.se/images/08b84eb923891fcc01dd3cdc4c1b1c7b.png"></li>
    <li><img src="http://cdn.imghack.se/images/aface157d33eed1ac449df27428bb339.png"></li>
    <li><img src="http://cdn.imghack.se/images/30dba15fd1c89ad8b6e6363b8ede09f9.png"></li>

</ul><!-- slides -->

.slides {
height:300px;
overflow:hidden;
position:relative;
width:705px;
background: black;
box-shadow: black 0 0 3px;
}
.slides ul {
margin-top:0;
list-style:none;
position:relative;
padding: 0;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
0% {opacity:0;}
25% {opacity:1;}
50% {opacity:1;}
75% {opacity:1;}
100% {opacity:0;}
}
@-moz-keyframes anim_slides {
0% {opacity:0;}
25% {opacity:1;}
50% {opacity:1;}
75% {opacity:1;}
100% {opacity:0;}
}

.slides ul li {
opacity:0;
position:absolute;
top:0;

/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;

-moz-animation-name: anim_slides;
-moz-animation-duration: 4s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}

/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
}
.slides ul li img {
display:block;
}

http://jsfiddle.net/5kdc2/3/

Answer 1

似乎你已经颠倒了不透明度动画顺序...

http://jsbin.com/wipow/1/edit

@keyframes anim_slides {
    0%, 100% {opacity:1;}
    25%, 75% {opacity:0;}
}

Answer 2

问题是如果你需要重复的动画循环，所有动画的循环时间应该相等。此处的周期时间是animation-duration和animation-delay的总和。因此，您无法设置相同的animation-duration但具有不同的animation-delay s。事实上，如果在第一个周期之后，我们可以删除所有animation-delay（将所有设置为0），这当然只能通过脚本完成。

所以我认为你应该使用相同的animation-duration（作为周期时间）并设置不同的animation-name（我们需要为每个动画使用不同的关键帧）。以下是代码详细信息：

@-webkit-keyframes anim_slides {
  0%, 23%, 100% {opacity:1;}
  36%, 90% {opacity:0;}            
}
@-webkit-keyframes anim_slides2 {
  0%, 23%, 69%, 100% {opacity:0;}
  36%, 56% {opacity:1;}    
}

@-webkit-keyframes anim_slides3 {
  0%, 56%, 100% {opacity:0;}    
  69%, 89% {opacity:1;}    
}
.slides ul  li:nth-child(1), .slides ul  li:nth-child(1) div {    
  -webkit-animation-name: anim_slides;
}
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {           
  -webkit-animation-name: anim_slides2;    
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {        
  -webkit-animation-name: anim_slides3;    
}

如您所见，每个动画的opacity:1时间仅为animation-duration的20％。要构建这些关键帧，您必须仔细计算，否则效果不会像预期的那样。现在，您可以轻松更改animation-duration（用于所有动画）以更改频率。

CSS幻灯片在第一次循环后不起作用

2 个答案:

Updated Demo.