web-dev-qa-db-fra.com

Fondu enchaîné entre images avec CSS en boucle

Je veux faire un fondu entre les images dans une boucle (comme résultat ici - jsfiddle.net/5M2PD ) mais uniquement par CSS, pas JavaScript. J'ai essayé d'utiliser des images clés mais je n'ai pas réussi. Veuillez 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;
}
cssfadekeyframe
17
Rachit Sharma

J'ai pris votre violon comme base et l'ai fait fonctionner sans script.

démo mise à jour

Je devais définir un identifiant au format 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 c'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 règle les images clés pour donner environ 1/3 du temps visible, avec des transitions appropriées. Ensuite, j'ai défini des délais différents pour chaque image, afin qu'ils alternent. Si vous souhaitez une prise en charge complète du navigateur, vous aurez besoin de plus de préfixes de fournisseurs. J'ai utilisé -webkit- et la propriété nue pour que vous ayez l'idée.

28
vals