Mehrfachüberblendung von Bildern in CSS - ohne (Java) -Skript

Question

Ist es möglich, 5 Bilder in CSS zu überblenden, ohne Java Script zu verwenden? Ich habe eine ähnliche Frage gefunden: css3 image crossfade (no javascript), aber es hat nur das CSS-Code-Snippet; was ich versuchte, aber es konnte nicht funktionieren. Ich bin neu in CSS, so konnte die CSS in der oben genannten Seite zu meinen folgenden HTML erwähnt verlinken:

<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

Dies kann leicht mit CSS3 getan werden, wenn Sie wissen, wie viele Bilder Sie haben.

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

Die "30er" bei "-webkit-Animation: imageAnimation 30s linear unendlich 0s;" erzählt, dass die Animation für jedes Bild wird 30 Sekunden dauern in Infinete Anzahl von Malen.

#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

Das Beispiel sollte man für das Beispiel, das Sie verwiesen für Sie verwiesen arbeiten. Beachten Sie jedoch, dass CSS3 nicht auf allen Browsern (wie IE8 und IE7) unterstützt wird und daher in diesen Browsern nicht funktioniert.