Desvanecimiento cruzado de varias imágenes en CSS sin script (java)

¿Es posible desvanecer 5 imágenes en CSS, sin usar el script java? He encontrado una pregunta similar: crossfade de imagen css3 (sin javascript) , sin embargo, solo tiene el fragmento de código CSS; lo intenté, pero no pude hacerlo funcionar. Soy nuevo en CSS, por lo que no pude vincular el CSS mencionado en la página anterior a mi siguiente HTML:

png png png png png

Esto se puede hacer fácilmente con CSS3 si sabe cuántas imágenes tiene.

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

El “30s” en ” -webkit-animation: imageAnimation 30s linear infinite 0s; ” dice que la animación de cada imagen durará 30 segundos en infinete varias veces.

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

El ejemplo que mencionó debería funcionar para usted para el ejemplo al que hizo referencia. Sin embargo, tenga en cuenta que CSS3 no es compatible con todos los navegadores (como IE8 e IE7) y, por lo tanto, no funcionará en esos navegadores.