I'm looking to create a smooth transition between images in my photo gallery without relying on ":hover" or any Javascript. I'm open to exploring options with HTML5.
The slideshow animation should start automatically when the page loads, with no user input required. However, I'm having trouble with the timing in my CSS. Ideally, I want each image to fade out every 6 seconds as the next one fades in seamlessly. The animation should loop continuously after displaying the last image.
I've tried adding delays between the images to stagger the animations, but they end up overlapping too much. It seems like I have misunderstood some key concepts. Here is the CSS code I'm currently using:
#imgContainer {
height: 205px;
position: relative;
width: 300px;
}
#imgContainer img {
-moz-animation-duration: 12s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: FadeInOut;
-moz-animation-timing-function: ease-in-out;
left: 0;
position: absolute;
}
#imgContainer img:nth-of-type(1) {
-moz-animation-delay: 0s;
}
#imgContainer img:nth-of-type(2) {
-moz-animation-delay: 6s;
}
#imgContainer img:nth-of-type(3) {
-moz-animation-delay: 12s;
}
@-moz-keyframes FadeInOut {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
As I am new to CSS3, any guidance or help would be greatly appreciated.