I'm pretty sure it's possible to do a css only image crossfade using the new css animation features. My requirements are that it should work for arbitrary number of images without javascript.
Does anyone know how it's done?
How I'm starting off:
img(src='img1.png')
img(src='img2.png')
img(src='img3.png')
img(src='img4.png')
Next all the images are set to stack on top of each other with the first one showing:
img
opacity 0
transition 1s
position absolute
&:first-child
opacity 100
Now how do I go through each image?
Edit: Seems impossible. Requires javascript.
This article is the best I've seen for doing an effect like this.
http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
They use spans, animation and the :nth-child property to achieve a crossfade between the 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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With