Trying to make a div slideshow - html

Question

I'm trying to make an automatic DIV slideshow with CSS but I have a problem. I have this code but the animation delay seems like it isn't working or they fade at the same time.
Here is the 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>
Here is the 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 }
}
I'm a beginner programmer so I will thanks all the tips you can give me.
.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

Here is a working example that I used before:
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);
Here is the demo