CODEWITHSUNDEEP
cssslideshowfade
egr103
egr103

Reputation: 4008

Pure CSS3 crossfade

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

Upvotes: 1

Views: 2236

Answers (4)

Sam
Sam

Reputation: 11

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.

Upvotes: 1

egr103
egr103

Reputation: 4008

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

Upvotes: 0

ericjbasti
ericjbasti

Reputation: 2075

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.

Upvotes: 1

Ramesh
Ramesh

Reputation: 347

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

Upvotes: 1

Related Questions