在CSS中多圖像交叉淡入淡出 - 沒有（java）腳本

Question

是否可以在CSS中淡入淡出5個圖像，而不使用java腳本？我發現了一個類似的問題： css3 image crossfade (no javascript)，但是，它只有CSS代碼片段;我嘗試過，但無法讓它工作。我是新來的CSS，所以無法將上面提到的CSS鏈接到我的下列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

如果您知道您有多少圖片，可以使用CSS3輕鬆完成。

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

的 「30秒」，在 「-webkit動畫：imageAnimation 30秒線性無限 0;」 告訴各圖像的動畫將持續30秒，以infinete次數。

#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

您引用的示例應該適用於您引用的示例。但請注意，所有瀏覽器（例如IE8和IE7）都不支持CSS3，因此無法在這些瀏覽器中使用。