CSS3 slideshow has corrupted and blurry output

Question

The below CSS controls the timing of my 3 images slideshow:

.slideshow li:child(1) span { 
    background-image: url(../../pic/bg1.jpg); 
}
.slideshow li:child(2) span { 
    background-image: url(../../pic/bg2.jpg);
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s; 
}
.slideshow li:child(3) span { 
    background-image: url(../../pic/bg3.jpg);
    -webkit-animation-delay: 16s;
    -moz-animation-delay: 16s;
    -o-animation-delay: 16s;
    -ms-animation-delay: 16s;
    animation-delay: 16s; 
}

the problem i am facing exactly, is that images are overlapping each other when it's time for a transition from one image to the next, which is resulting in a bad quality slideshow and sometimes it gets stuck and stops sliding. Should i add something else to my code?

Answer 1

I think I encountered before a similar case. The problem of overlapping images here maybe is due to the "opacity" parameter not being defined. And by "opacity" I mean that even if your current CSS is controlling the animation delay, it should also control the timing of each image "opacity" so it gives the feeling of fade-in and out and then restarts again properly. So, from your above CSS, the whole slideshow cycle is 16 seconds; now, we know that the second image will start animating at the 8th second, we have to know at what percentile of the animation this will take the first image to fade out. Dividing 8 by 16 gives us 0.5 or 50%. Now, it won't be visually ok to take all that time to fade in, so we take the half value which is 25%. Then, we start fading it out from 50% to disappear completely at 75%. The above could be done using CSS "@keyframes" property, something like that:

{
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-      function: ease-in;}
25% { opacity: 1; animation-timing-function: ease-out;}
50% { opacity: 1 }
75% { opacity: 0 }
100% { opacity: 0 }
}

Let us know if it works.