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 par le biais de CSS, pas 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;
}
15
demandé sur Maciej A. Czyzewski 2013-07-30 22:41:19

1 réponses

j'ai pris votre violon comme base, et je l'ai fait fonctionner sans script.

mise à jour de la démo

j'avais besoin de mettre un id au 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>

.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 règle les images clés pour donner environ 1/3 du temps visible, avec des transitions appropriées. Puis je mets différents délais pour chaque image, de sorte qu'ils alternent. Si vous voulez une prise en charge complète du navigateur, vous aurez besoin de plus de préfixes vendeur. J'ai utilisé - webkit - et propriété nue de sorte que vous obtenez l'idée.

24
répondu vals 2013-07-31 16:35:44