html - 尝试制作 div 幻灯片

Question

我正在尝试使用 CSS 制作自动 DIV 幻灯片，但我遇到了问题。我有这段代码，但动画延迟似乎不起作用，或者它们同时消失。

这是HTML

<div class="cosafancya">
   <div>
      <div class="espacioimagen">
         <div class="fancyosoleche">
            <p class="fancytext"> About us</p>
         </div>
         <img src="../uploads/agbar.png" class="fotodeslizante" />
      </div>
   </div>
   <div>
      <div class="espacioimagen">
         <div class="fancyspace">
            <p class="fancytext"> About us</p>
         </div>
         <img src="../uploads/logo.png" class="fotodeslizante" />
      </div>
   </div>
</div>

这是 CSS:

.cosafancya {
top: 0; bottom: 0; left: 0; right: 0;
position: absolute;
z-index: 0;
overflow: hidden;
}

.cosafancya div {
animation: Animacionchunga 20s linear infinite ;
-moz-animation: Animacionchunga 20s linear infinite;
-o-animation: Animacionchunga 20s linear infinite;
-webkit-animation: Animacionchunga 20s linear infinite;
}

.cosafancya div:nth-child(2) {
opacity: 0;
animation-delay: 10s;
-webkit-animation-delay: 10s; }

@-webkit-keyframes Animacionchunga { 
0% { opacity: 0 }
5% { opacity: 1 }
50% { opacity: 1 }
55% { opacity: 0 }
100% { opacity: 0 }
}

@-moz-keyframes Animacionchunga { 
0% { opacity: 0 }
5% { opacity: 1 }
50% { opacity: 1 }
55% { opacity: 0 }
100% { opacity: 0 }
}

@-o-keyframes Animacionchunga { 
0% { opacity: 0 }
5% { opacity: 1 }
50% { opacity: 1 }
55% { opacity: 0 }
100% { opacity: 0 }
}

@keyframes Animacionchunga { 
0% { opacity: 0 }
5% { opacity: 1 }
50% { opacity: 1 }
55% { opacity: 0 }
100% { opacity: 0 }
}

我是一名初级程序员，所以我会感谢您给我的所有提示。

.cosafancya {
top: 0; bottom: 0; left: 0; right: 0;
position: absolute;
z-index: 0;
overflow: hidden;
}

.cosafancya div {
animation: Animacionchunga 20s linear infinite ;
-moz-animation: Animacionchunga 20s linear infinite;
-o-animation: Animacionchunga 20s linear infinite;
-webkit-animation: Animacionchunga 20s linear infinite;
}

.cosafancya div:nth-child(2) {
opacity: 0;
animation-delay: 10s;
-webkit-animation-delay: 10s; }

@-webkit-keyframes Animacionchunga { 
0% { opacity: 0 }
5% { opacity: 1 }
50% { opacity: 1 }
55% { opacity: 0 }
100% { opacity: 0 }
}

@-moz-keyframes Animacionchunga { 
0% { opacity: 0 }
5% { opacity: 1 }
50% { opacity: 1 }
55% { opacity: 0 }
100% { opacity: 0 }
}

@-o-keyframes Animacionchunga { 
0% { opacity: 0 }
5% { opacity: 1 }
50% { opacity: 1 }
55% { opacity: 0 }
100% { opacity: 0 }
}

@keyframes Animacionchunga { 
0% { opacity: 0 }
5% { opacity: 1 }
50% { opacity: 1 }
55% { opacity: 0 }
100% { opacity: 0 }
}

<div class="cosafancya">
   <div>
      <div class="espacioimagen">
         <div class="fancyosoleche">
            <p class="fancytext"> About us</p>
         </div>
         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyB3aHHDHNj_pdItM9yc-_MVn9Lrl8k9cWApT2UE8cLrLjHrCo" class="fotodeslizante" />
      </div>
   </div>
   <div>
      <div class="espacioimagen">
         <div class="fancyspace">
            <p class="fancytext"> About us</p>
         </div>
         <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRFzcSMCNl_Mz_6AMknWeYg4RQPrFjc3-X2AWiaUy63yUgXozO9" class="fotodeslizante" />
      </div>
   </div>

Answer 1

这是我之前使用的一个工作示例:HTML:

<div id="slideshow">
 <div>
  <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
 </div>
 <div>
  <img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
 </div>
 <div>
  Pretty cool eh? This slide is proof the content can be anything.
 </div>

CSS:

#slideshow { 
margin: 50px auto; 
position: relative; 
width: 240px; 
height: 240px; 
padding: 10px; 
box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
position: absolute; 
top: 10px; 
left: 10px; 
right: 10px; 
bottom: 10px; 
}

jQuery JavaScript:

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
},  3000);

这里是 the demo