Dissolvenza incrociata di più immagini in CSS - senza (java) script

Question

È possibile incrociare le 5 immagini di dissolvenza in CSS, senza utilizzare lo script java? Ho trovato una domanda simile: css3 image crossfade (no javascript), tuttavia, ha solo lo snippet di codice CSS; che ho provato, ma non riuscivo a farlo funzionare. Sono nuovo di CSS, quindi non riuscivo a collegare il CSS indicato nella pagina di cui sopra nel mio seguente codice HTML:

<div id= "crossfade"> 
    <img class = "cone" src = "1.png" alt = "png"> 
    <img class = "ctwo" src = "2.png" alt = "png"> 
    <img class = "cthree" src = "3.png" alt = "png"> 
    <img class = "cfour" src = "4.png" alt = "png"> 
    <img class = "cfive" src = "5.png" alt = "png"> 
    </div> 

Answer 1

Questo può essere fatto facilmente con CSS3 se sai quante immagini hai.

jsFiddle: http://jsfiddle.net/hajmd/

#crossfade > img { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    color: transparent; 
    opacity: 0; 
    z-index: 0; 
    -webkit-backface-visibility: hidden; 
    -webkit-animation: imageAnimation 30s linear infinite 0s; 
    -moz-animation: imageAnimation 30s linear infinite 0s; 
    -o-animation: imageAnimation 30s linear infinite 0s; 
    -ms-animation: imageAnimation 30s linear infinite 0s; 
    animation: imageAnimation 30s linear infinite 0s; 
} 

Gli "anni '30" a "-webkit-animazione: imageAnimation 30s lineari infinite 0s;" dice che l'animazione per ogni immagine avrà una durata di 30 secondi in infinito numero di volte.

#crossfade > img:nth-child(2) { 
    background-image: url(../images/2.jpg); 
    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -o-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s; 
} 
#crossfade > img:nth-child(3) { 
    background-image: url(../images/3.jpg); 
    -webkit-animation-delay: 12s; 
    -moz-animation-delay: 12s; 
    -o-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s; 
} 
#crossfade > img:nth-child(4) { 
    background-image: url(../images/4.jpg); 
    -webkit-animation-delay: 18s; 
    -moz-animation-delay: 18s; 
    -o-animation-delay: 18s; 
    -ms-animation-delay: 18s; 
    animation-delay: 18s; 
} 
#crossfade > img:nth-child(5) { 
    background-image: url(../images/5.jpg); 
    -webkit-animation-delay: 24s; 
    -moz-animation-delay: 24s; 
    -o-animation-delay: 24s; 
    -ms-animation-delay: 24s; 
    animation-delay: 24s; 
} 

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0; 
    -webkit-animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     -webkit-animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0 } 
    100% { opacity: 0 } 
} 

@-moz-keyframes imageAnimation { 
    0% { opacity: 0; 
    -moz-animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     -moz-animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0 } 
    100% { opacity: 0 } 
} 

@-o-keyframes imageAnimation { 
    0% { opacity: 0; 
    -o-animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     -o-animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0 } 
    100% { opacity: 0 } 
} 

@-ms-keyframes imageAnimation { 
    0% { opacity: 0; 
    -ms-animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     -ms-animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0 } 
    100% { opacity: 0 } 
} 

@keyframes imageAnimation { 
    0% { opacity: 0; 
    animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0 } 
    100% { opacity: 0 } 
} 

Answer 2

L'esempio si fa riferimento dovrebbe funzionare per voi per l'esempio si fa riferimento. Tuttavia, tieni presente che CSS3 non è supportato su tutti i browser (come IE8 e IE7) e pertanto non funzionerà con quei browser.