[SOLVED] How to make a simple timer image slideshow using HTML and CSS

How to make a simple timer image slideshow using HTML and CSS

I'm trying to make a simple timer slideshow, where an image is only visible for a certain amount of time (5 seconds) and then the sliedshow goes to another image - this repeats forever.

I've searched for a solution, but can't seem to get anything to work right. Any help would be amazing, thank you beforehand.

Here's what I've tried so far - two images fading in, but they do not overlap. One is above the other, the fading animation works, but they both fade at the exact same time instead of one fading and transitioning to the next image.

@keyframes cf3FadeInOut {
    0% { opacity:1; }
   45% { opacity:1; }
   55% { opacity:0; }
  100% { opacity:0; }
}

#cf {
  animation-name            : cf3FadeInOut;
  animation-timing-function : ease-in-out;
  animation-iteration-count : infinite;
  animation-duration        : 10s;
  animation-direction       : alternate;
}

<div id="cf">
  <img class="bottom" src="12289696_1526730367649084_3157113004361281453_n.jpg" />
  <img class="top" src="11406788_1433347623654026_6824927253890240539_n.jpg" />
</div>

Solution

with 2 image , you can do something at low cost with CSS animation:

@keyframes cf {
  50% {/* at 50%, it avoids alternate mode */
    opacity: 0;
  }
}

#cf {/* same size as image */
  height: 300px;
  width: 200px;
  margin:auto;
}

#cf img {
  position: absolute;/* lets stack them */
}

#cf .top {
  animation: cf 10s infinite; /* let it run for ever */
}

<div id="cf">
  <img class="bottom" src="http://lorempixel.com/200/300/people/3" />
  <img class="top" src="http://lorempixel.com/200/300/people/4" />
</div>