CSS fading animation timing off - html

Question

so I'm trying to fade 3 images, one on top of each other slowly so you can see each image for a few secs before the next one fades on top. I'm following this tutorial here. However for some reason my images seem to fade over each other too fast and I can't control the timing well.
Here is my preview page. You are suppose to see a bird, then tomatoes then a boat, but right now it just all fades on top of each other and ends up on the boat.
I'm following Demo 1 and Demo 3, any ideas why my animation is off? Thanks in advance! :)
My jsfiddle:
http://jsfiddle.net/leongaban/TPjWG/
CODE:
<style>
#-webkit-keyframes cf4FadeInOut {
0% {
opacity:0;
}
25% {
opacity:1;
}
50% {
opacity:1;
}
100% {
opacity:1;
}
}
#-moz-keyframes cf4FadeInOut {
0% {
opacity:0;
}
25% {
opacity:1;
}
50% {
opacity:1;
}
100% {
opacity:1;
}
}
#-ms-keyframes cf4FadeInOut {
0% {
opacity:0;
}
25% {
opacity:1;
}
50% {
opacity:1;
}
100% {
opacity:1;
}
}
#cf4a {
position:relative;
height:250px;
width:300px;
margin:0 auto;
}
#cf4a img {
position:absolute;
left:0;
}
#cf4a img {
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 30s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: 1;
-moz-animation-duration: 30s;
-ms-animation-name: cf4FadeInOut;
-ms-animation-timing-function: ease-in-out;
-ms-animation-iteration-count: 1;
-ms-animation-duration: 30s;
}
#cf4a img:nth-of-type(1) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-ms-animation-delay: 0;
}
#cf4a img:nth-of-type(2) {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-ms-animation-delay: 30s;
}
#cf4a img:nth-of-type(3) {
-webkit-animation-delay: 60s;
-moz-animation-delay: 60s;
-ms-animation-delay: 60s;
}
</style>
<div id="cf4a">
<img src="img/bird1.jpg" />
<img src="img/tomato2.jpg" />
<img src="img/boat3.jpg" />
</div>

Answer 1

I believe part of your issue is z-index ordering during the animation and lack of overlap in the timing of the animations (in relation to that z-index).
Using a fade-out only technique (since you appear to be doing a one time animation of the images). I have a solution with a working demo tested in Firefox and Chrome (IE9 does not support animations, so you must be gearing up for IE10 with your initial use of -ms- extensions). Since I am only fading out once, no animation is needed on the final a tag, as it is unveiled last and remains (and is the default for non-CSS3 animating browsers).
The demo uses the following CSS code (same HTML as your original):
CSS
#-webkit-keyframes cf4FadeOut1 {
0% {
opacity:1;
z-index: 100;
}
80% { /* 6 sec trans on 30s animation */
opacity:1;
z-index: 100;
}
100% {
opacity:0;
z-index: 100;
}
}
#-moz-keyframes cf4FadeOut1 {
0% {
opacity:1;
z-index: 100;
}
80% { /* 6 sec trans on 30s animation */
opacity:1;
z-index: 100;
}
100% {
opacity:0;
z-index: 100;
}
}
#-ms-keyframes cf4FadeOut1 {
0% {
opacity:1;
z-index: 100;
}
80% { /* 6 sec trans on 30s animation */
opacity:1;
z-index: 100;
}
100% {
opacity:0;
z-index: 100;
}
}
#-webkit-keyframes cf4FadeOut2 {
0% {
opacity:1;
z-index: 2;
}
90% { /* 6 sec trans on 60s animation */
opacity:1;
z-index: 2;
}
100% {
opacity:0;
z-index: 2;
}
}
#-moz-keyframes cf4FadeOut2 {
0% {
opacity:1;
z-index: 2;
}
90% { /* 6 sec trans on 60s animation */
opacity:1;
z-index: 2;
}
100% {
opacity:0;
z-index: 2;
}
}
#-ms-keyframes cf4FadeOut2 {
0% {
opacity:1;
z-index: 2;
}
90% { /* 6 sec trans on 60s animation */
opacity:1;
z-index: 2;
}
100% {
opacity:0;
z-index: 2;
}
}
#cf4a {
position:relative;
height:250px;
width:300px;
margin:0 auto;
}
#cf4a a {
position:absolute;
left:0;
z-index: 0;
}
#cf4a a {
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: 1;
-moz-animation-delay: 0;
-ms-animation-timing-function: ease-in-out;
-ms-animation-iteration-count: 1;
-ms-animation-delay: 0;
}
#cf4a a:nth-of-type(1) {
-webkit-animation-name: cf4FadeOut1;
-moz-animation-name: cf4FadeOut1;
-ms-animation-name: cf4FadeOut1;
-webkit-animation-duration: 30s;
-moz-animation-duration: 30s;
-ms-animation-duration: 30s;
}
#cf4a a:nth-of-type(2) {
-webkit-animation-name: cf4FadeOut2;
-moz-animation-name: cf4FadeOut2;
-ms-animation-name: cf4FadeOut2;
-webkit-animation-duration: 60s;
-moz-animation-duration: 60s;
-ms-animation-duration: 60s;
}

Answer 2

In your fiddle and demo page you have the images wrapped in <a> tags. This causes the error to be in your use of :nth-of-type().
All your images are being affected by the :nth-of-type(1)
declaration since they are all 'first-child' elements within the <a> tags.

Answer 3

I made some changes and got it working slightly better than before. However, I still can't explain why the animation doesn't work properly when the image changes from the last one to the first one.
<head>
<title> CSS alpha animation test </title>
<meta charset="utf-8" />
</head>
<body>
<style>
#-webkit-keyframes cf4FadeInOut {
0% {
opacity:0;
}
45% {
opacity:0;
}
55% {
opacity:1;
}
100% {
opacity:1;
}
}
#cf4a {
position:relative;
height:250px;
width:300px;
margin:0 auto;
}
#cf4a img {
position:absolute;
left:0;
}
#cf4a img {
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 30s;
}
#cf4a img:nth-of-type(1) {
-webkit-animation-delay: 0s;
}
#cf4a img:nth-of-type(2) {
-webkit-animation-delay: 10s;
}
#cf4a img:nth-of-type(3) {
-webkit-animation-delay: 20s;
}
</style>
<div id="cf4a">
<img src="http://leongaban.com/_stack/css_animation/img/bird1.jpg" />
<img src="http://leongaban.com/_stack/css_animation/img/tomato2.jpg" />
<img src="http://leongaban.com/_stack/css_animation/img/boat3.jpg" />
</div>
</body>
</html>​​​​​​​​​​​​​​​
Note that I have removed all the other code for the different browsers and just left the webkit code because I was testing this on chrome. I also changed the percentages complete as in their examples and that made a bit of a difference.

Answer 4

why dont you try using jquery.
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
//var $sibs = $active.siblings();
//var rndNum = Math.floor(Math.random() * $sibs.length );
//var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});