Попытка сделать слайд-шоу div

Question

Я пытаюсь сделать автоматическое слайд-шоу DIV с CSS, но у меня есть проблема. У меня есть этот код, но задержка анимации кажется, что она не работает, или они исчезают одновременно.

Вот 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