CSS3 Photo Gallery Transition Effect

Question

I'm trying to create a graceful transition between the images within my photo gallery without using ":hover" or an once of Javascript. (I'm still open minded to HTML5)

The animation, this slideshow, should begin on page load, no user interaction needed. However my CSS isn't properly timed. Ideally, every 6 seconds, the current image begins to fade out just as the next image begins to fade in. The animation should loop infinitely after the last image.

I'm using a delay between the images in an attempt to stagger the animations, but the images overlap each other far too much. I seem to have misunderstood a number of things. My Css is below:

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

I'm really new to css3, so any kind of assistance would be greatly appreciated.

Answer 1

Success!

I discovered if I apply an animation to each of my images within the slideshow, rather than being delayed, I could achieve the effect I desired. Basically the animations would run sequentially in an infinite loop, and rather than use a single keyframe, each has their own.

I wanted the slideshow to progress at 15s intervals. So to accomplish this I set the duration of the entire animation to 45s. The keyframes gradually adjust the opacity of the images based on the current time or frame within the animation. This is indicated by the "%." For example, from 2% to 32% of 45s, the keyframe for the first image will be 100% opaque. Between 32% and 34%, the first image will begin the transition from being opaque to completely transparent.

The difference between (34% of 45s) - (32% of 45s) equals the length of time to complete the transition. Increase this difference for a longer transition.

The keyframe for the second image does the same only its' transition doesn't begin until it reaches 33% of the 45s animation. (I chose to overlap them slightly for visual appeal). Again, I use the difference between 33% and 35% to keep the transition time short, rather than 0% and 35% which would've produced a much longer transition.

The third keyframe follows the same scheme for its image.

As you implement this, don't forget to change / add the appropriate vendor prefix for your browser and browser of your web audience.

/*Chrome/Safari: -webkit- \ FireFox +4: -moz- \ Opera: -o- \ IE9?: -ms- */

I hope this is helpful to anyone else who may be trying to do the same. If you like what you've read, please feel free to let me know as you vote using the up-arrow.

Thanks.

=)

#imgContainer img{
    position:absolute;
    left:0;
}

#image0 {
    -moz-animation: 45s linear 0s normal none infinite myKeyFrameName0;
}
#image1 {
    -moz-animation: 45s linear 0s normal none infinite myKeyFrameName1;
}
#image2 {
    -moz-animation: 45s linear 0s normal none infinite myKeyFrameName2;
}

@-moz-keyframes myKeyFrameName0 {
0%   {opacity: 0;}
2%   {opacity: 1;}
32%  {opacity: 1;}
34%  {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes myKeyFrameNamee1 {
0%   {opacity: 0;}
33%  {opacity: 0;}
35%  {opacity: 1;}
65%  {opacity: 1;}
67%  {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes myKeyFrameName2 {
0%   {opacity: 0;}
66%  {opacity: 0;}
68%  {opacity: 1;}
98%  {opacity: 1;}
100% {opacity: 0;}
}