Cross-Fade entre les images avec CSS en boucle

Je veux fondu entre les images dans une boucle (comme le résultat ici -jsfiddle.net/5M2PD), mais uniquement au travers de CSSpas de JavaScript. J'ai essayé d'utiliser les images clés, mais je n'ai pas réussi. S'Il Vous Plaît Aider.

@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;
}

source d'informationauteur Rachit Sharma

  1. 23

    J'ai pris votre violon comme une base, et de le faire fonctionner sans script.

    mise à jour de la démo

    J'avais besoin de définir un id dans le HTML

    <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>

    Et le CSS est:

    .fadein img {
    position:absolute;
    left:-65px;
    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;
}

    Je suis en train de les images clés pour donner environ 1/3 du temps visible, avec adéquat des transitions.
    Puis j'ai mis différents retards pour chaque image, de sorte qu'ils alternent.
    Si vous voulez la pleine prise en charge du navigateur, vous aurez besoin de plus de fournisseur de préfixes. Je l'ai utilisé,- webkit - et de la nue-propriété de sorte que vous obtenez l'idée.