Css3 image crossfade (without javascript)

Question

I'm sure you can only use the crossfade css css using the new css animation features. My requirements are that it should work for an arbitrary number of images without javascript.

Does anyone know how to do this?

How do I start:

img(src='img1.png') img(src='img2.png') img(src='img3.png') img(src='img4.png') 

Then all the images are set on top of each other, and the first one shows:

 img opacity 0 transition 1s position absolute &:first-child opacity 100 

Now, how do I go through each image?

Edit: seems impossible. Requires javascript.

Answer 1

This article is the best I've seen to make such an effect.

http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

They use spacing, animation, and the: nth-child property to achieve crossfade between background images. Pretty awesome.

 .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; animation: imageAnimation 36s linear infinite 0s; } .cb-slideshow li:nth-child(1) span { background-image: url(../images/1.jpg) } .cb-slideshow li:nth-child(2) span { background-image: url(../images/2.jpg); animation-delay: 6s; } .cb-slideshow li:nth-child(3) span { background-image: url(../images/3.jpg); animation-delay: 12s; } .cb-slideshow li:nth-child(4) span { background-image: url(../images/4.jpg); animation-delay: 18s; } .cb-slideshow li:nth-child(5) span { background-image: url(../images/5.jpg); animation-delay: 24s; } .cb-slideshow li:nth-child(6) span { background-image: url(../images/6.jpg); animation-delay: 30s; } .cb-slideshow li:nth-child(2) div { animation-delay: 6s; } .cb-slideshow li:nth-child(3) div { animation-delay: 12s; } .cb-slideshow li:nth-child(4) div { animation-delay: 18s; } .cb-slideshow li:nth-child(5) div { animation-delay: 24s; } .cb-slideshow li:nth-child(6) div { animation-delay: 30s; } 

Answer 2

Use the keyframes described in this article: http://css3.bradshawenterprises.com/cfimg/#cfimg3