Cross-Fade between images with CSS in loop

Question

I want to fade between images in a loop (like result here-jsfiddle.net/5M2PD) but purely through CSS, no JavaScript. I tried using key-frames but I wasn't successful. Please Help.

@keyframes cf3FadeInOut {     0% {         opacity:1;     }     45% {         opacity:1;     }     55% {         opacity:0;     }     100% {         opacity:0;     } }  #cf3 img.top {    animation-name: cf3FadeInOut;    animation-timing-function: ease-in-out;    animation-iteration-count: infinite;    animation-duration: 10s;    animation-direction: alternate; } 

Answer 1

I have taken your fiddle as a base, and made it work without script.

updated demo

I needed to set an id to the HTML

.fadein img {     position:absolute;     top:0;     -webkit-animation-name: fade;     -webkit-animation-iteration-count: infinite;     -webkit-animation-duration: 6s;     animation-name: fade;     animation-iteration-count: infinite;     animation-duration: 6s; }  @-webkit-keyframes fade {     0% {opacity: 0;}     20% {opacity: 1;}     33% {opacity: 1;}     53% {opacity: 0;}     100% {opacity: 0;} } @keyframes fade {     0% {opacity: 0;}     20% {opacity: 1;}     33% {opacity: 1;}     53% {opacity: 0;}     100% {opacity: 0;} }  #f1 {     background-color: lightblue; } #f2 {     -webkit-animation-delay: -4s;     background-color: yellow; } #f3 {     -webkit-animation-delay: -2s;     background-color: lightgreen; }

<div class="fadein">     <img id="f3" src="http://i.imgur.com/R7A9JXc.png">     <img id="f2" src="http://i.imgur.com/D5yaJeW.png">     <img id="f1" src="http://i.imgur.com/EUqZ1Er.png"> </div>

I am setting the keyframes to give aprox 1/3 of the time visible, with apropiate transitions. Then I set different delays for every image, so that they alternate. If you want full browser support, you will need more vendor prefixes. I have used -webkit- and bare property so that you get the idea.