Pure CSS3 crossfade - css

Question

I'm working on a pure CSS3 crossfader between images. The problem I'm having is that its only two images and when the second image fades out, it fades to white instead of looping straight back to image 1.
My not so working fiddle is here: http://jsfiddle.net/uQU6y/2/
.item img {
position:absolute;
left:0;
top:0;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 6s;
}
#-webkit-keyframes fade {
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
#f2 {
-webkit-animation-delay: -4s;
}

Answer 1

Hi please find the jsfiddle
you had given id="f1" in html but you didn't use it in css.

Answer 2

This uses a very different method, but from the looks of your example it might be exactly what you need. http://jsfiddle.net/ericjbasti/uQU6y/4/ this is a pure css crossfade, that takes advantage of how the current browsers fade background images.
.image1{
background-image:url(http://placehold.it/290x350);
}
.image1:hover{
background-image:url(http://placehold.it/290x350/000000/ffffff);
}
For my quick example all im doing is a hover effect, but you could easily control this through changes to a class name.

Answer 3

1this solution can be improved. If you use real images you will clearly see that there is rough transition initially. That is because you set f2 on 999. Use this instead:
#f1 {
z-index:999;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 10s;
}
Then change the animation bit as follows:
#-webkit-keyframes fade {
0% {opacity: 1;}
20% {opacity: 0;}
33% {opacity: 0;}
53% {opacity: 1;}
100% {opacity: 1;}
}
#keyframes fade {
0% {opacity: 1;}
20% {opacity: 0;}
33% {opacity: 0;}
53% {opacity: 1;}
100% {opacity: 1;}
}
This will transition #f1 instead of #f2 which means the animation is smooth from beginning on.

Answer 4

Well turns out it was a simple fix to the CSS timings and placement of the animation code. The code I had used worked great with 3 images however for 2 I needed to alter the duration of the animation in order to remove the fade to white. I also had to put the animation information (duration, iteration, name etc. )Here's the JSfiddle: http://jsfiddle.net/uQU6y/7/
The key part of the code:
#f2 {
z-index:999;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 10s;
}