Search code examples
htmlcssanimationdelay

Trying to make a div slideshow

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>

Solution

  • 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