CSS3 slideshow has corrupted and blurry output
Below CSS controls the timing of my 3 image 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 is the images overlap each other when it is time to transition from one image to another, resulting in a poor quality slideshow and sometimes it gets stuck and stops sliding. Should I add something else to my code?
source to share
I think I ran into a similar case. The problem with overlapping images here may be due to the opacity parameter being undefined. And by "opacity" I mean that even though your current CSS controls the animation delay, it also needs to control the timing of each "opacity" of each image, so that it feels like fading out and out, and then starting up correctly again. So from your above CSS, the entire slideshow loop is 16 seconds; now we know that the second image will start animation at the 8th second, we need to know at which animation percentile this will make the first image disappear. Dividing 8 by 16 gives us 0.5 or 50%. Now, it won't be visually normal for all this time to disappear, so we take the half value, which is 25%.Then we start fading out at 50% to completely fade out at 75%. The above can be accomplished using the "@keyframes" CSS property, something like this:
{
@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.
source to share