सीएसएस में एकाधिक छवि क्रॉस फ़ेडिंग - बिना (जावा) स्क्रिप्ट

Question

क्या जावा स्क्रिप्ट का उपयोग किए बिना सीएसएस में 5 छवियों को पार करना संभव है? मुझे एक समान प्रश्न मिला है: css3 image crossfade (no javascript), हालांकि, इसमें केवल सीएसएस कोड स्निपेट है; जिसकी मैंने कोशिश की, लेकिन यह काम नहीं कर सका। मैं सीएसएस के लिए नया हूँ, इसलिए मेरी निम्न 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; 
} 

"-webkit-एनीमेशन: imageAnimation रैखिक अनंत 0;" पर "30" बताता है कि प्रत्येक छवि के लिए एनीमेशन में 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

उदाहरण आप उदाहरण आप संदर्भित के लिए आप के लिए काम करना चाहिए संदर्भित किया है। हालांकि कृपया ध्यान दें कि CSS3 सभी ब्राउज़रों (जैसे IE8 और IE7) पर समर्थित नहीं है और इसलिए उन ब्राउज़रों में काम नहीं करेगा।