Hi there,
I am trying to make each image display at equal lengths of time, however the last image (12) seems to get stuck, then it shifts to image 3 instead instead of image 1 to start the animation again?
I have set the animation to last 4 seconds which is 48/12 images. Really can’t figure out why image 12 transitions to image 3 instead of 1??
<div id="container">
<div id="crossfade">
<img src="images/img1.jpg">
<img src="images/img2.jpg">
<img src="images/img3.jpg">
<img src="images/img4.jpg">
<img src="images/img5.jpg">
<img src="images/img6.jpg">
<img src="images/img7.jpg">
<img src="images/img8.jpg">
<img src="images/img9.jpg">
<img src="images/img10.jpg">
<img src="images/img11.jpg">
<img src="images/img12.jpg">
</div>
</div>
#fadecontainer {
position: relative;
margin-bottom: 390px;
}
#crossfade > img {
position: absolute;
top: 10px;
left: 0px;
color: transparent;
border: 1px solid #000000;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 44s linear infinite 0s;
-moz-animation: imageAnimation 44s linear infinite 0s;
-o-animation: imageAnimation 44s linear infinite 0s;
-ms-animation: imageAnimation 44s linear infinite 0s;
animation: imageAnimation 44s linear infinite 0s;
}
#crossfade > img:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade > img:nth-child(5) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
#crossfade > img:nth-child(6) {
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-o-animation-delay: 20s;
-ms-animation-delay: 20s;
animation-delay: 20s;
}
#crossfade > img:nth-child(7) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade > img:nth-child(8) {
-webkit-animation-delay: 28s;
-moz-animation-delay: 28s;
-o-animation-delay: 28s;
-ms-animation-delay: 28s;
animation-delay: 28s;
}
#crossfade > img:nth-child(9) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
}
#crossfade > img:nth-child(10) {
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
#crossfade > img:nth-child(11) {
-webkit-animation-delay: 40s;
-moz-animation-delay: 40s;
-o-animation-delay: 40s;
-ms-animation-delay: 40s;
animation-delay: 40s;
}
#crossfade > img:nth-child(12) {
-webkit-animation-delay: 44s;
-moz-animation-delay: 44s;
-o-animation-delay: 44s;
-ms-animation-delay: 44s;
animation-delay: 44s;
}
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
4% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
25% { opacity: 1 }
30% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
4% { opacity: 1;
-moz-animation-timing-function: ease-out; }
25% { opacity: 1 }
30% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
4% { opacity: 1;
-o-animation-timing-function: ease-out; }
25% { opacity: 1 }
30% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
4% { opacity: 1;
-ms-animation-timing-function: ease-out; }
25% { opacity: 1 }
30% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
4% { opacity: 1;
animation-timing-function: ease-out; }
25% { opacity: 1 }
30% { opacity: 0 }
100% { opacity: 0 }
}
PaulOB
January 13, 2014, 10:39pm
2
Hi,
Something like this seems to work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#fadecontainer {
position: relative;
margin-bottom: 390px;
}
#crossfade > img {
position: absolute;
top: 10px;
left: 10px;
color: transparent;
border: 1px solid #000000;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 48s linear infinite 0s;
-moz-animation: imageAnimation 48s linear infinite 0s;
-o-animation: imageAnimation 48s linear infinite 0s;
-ms-animation: imageAnimation 48s linear infinite 0s;
animation: imageAnimation 48s linear infinite 0s;
-moz-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
#crossfade > img:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
background:red;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
background:blue
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
background:green
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
background:pink;
}
#crossfade > img:nth-child(5) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
background:yellow
}
#crossfade > img:nth-child(6) {
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-o-animation-delay: 20s;
-ms-animation-delay: 20s;
animation-delay: 20s;
background:teal
}
#crossfade > img:nth-child(7) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
background:orange;
}
#crossfade > img:nth-child(8) {
-webkit-animation-delay: 28s;
-moz-animation-delay: 28s;
-o-animation-delay: 28s;
-ms-animation-delay: 28s;
animation-delay: 28s;
background:black;
}
#crossfade > img:nth-child(9) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
background:#fcf;
}
#crossfade > img:nth-child(10) {
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
background:#0F0
}
#crossfade > img:nth-child(11) {
-webkit-animation-delay: 40s;
-moz-animation-delay: 40s;
-o-animation-delay: 40s;
-ms-animation-delay: 40s;
animation-delay: 40s;
background:#666666
}
#crossfade > img:nth-child(12) {
-webkit-animation-delay: 44s;
-moz-animation-delay: 44s;
-o-animation-delay: 44s;
-ms-animation-delay: 44s;
animation-delay: 44s;
background:#ccc;
}
@-webkit-keyframes imageAnimation {
0% { opacity: 0;}
4% { opacity: 1 }
12% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;}
4% { opacity: 1 }
12% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;}
4% { opacity: 1; }
12% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;}
4% { opacity: 1 }
12% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;}
4% { opacity: 1 }
12% { opacity: 0 }
}
img{/* for testing */
display:block;
background:red;
width:300px;
height:300px;
}
</style>
</head>
<body>
<div id="container">
<div id="crossfade">
<img src="images/img1.jpg">
<img src="images/img2.jpg">
<img src="images/img3.jpg">
<img src="images/img4.jpg">
<img src="images/img5.jpg">
<img src="images/img6.jpg">
<img src="images/img7.jpg">
<img src="images/img8.jpg">
<img src="images/img9.jpg">
<img src="images/img10.jpg">
<img src="images/img11.jpg">
<img src="images/img12.jpg">
</div>
</div>
</body>
</html>
Each image takes 48 seconds to animate but only visible for 2 seconds and then fades out over 4 seconds which allows the next image to fade in before the one before has vanished.
This seems to work fine indeed Paul O’B so thanks very much for the time you have taken to look into this.
I have played about with the code further and did a bit more research and my problem was due to:
4% { opacity: 1;
-ms-animation-timing-function: ease-out; }
25% { opacity: 1 }
This means that 25% - 4% = 21% and 21% * the 12 images is greater than 100% !! So with this in mind, I have changed the delay times as follows (using one browser example) :
@keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
2% { opacity: 1; -webkit-animation-timing-function: ease-out; }
8.333% { opacity: 1 }
10% { opacity: 0 }
100% { opacity: 0 }
This now means that 100% / 12 (number of images) = 8.3333% which means Opacity: 1 from 2% to 8.333% in the animation, and this seems to work fine too.
Thanks for your help indeed.
Regards
PaulOB
January 14, 2014, 5:40pm
4
Glad you got it working:)
volterony:
This seems to work fine indeed Paul O’B so thanks very much for the time you have taken to look into this.
I have played about with the code further and did a bit more research and my problem was due to:
Yes that’s why I reduced the actual animation part down to 6 seconds (2 seconds in and 4 seconds out to allow the next image to fade in while the previous one fades out.). You had the images fading in over 2% approx but then remaining opaque for a further 12 seconds which meant by the time you get to the end you had a number of images still being processed.
The duration should be 48 seconds for the combined animation not 44 as you want the last one to be visible for 4 seconds before the first one kicks in again.
You should also remove the animation-timing properties from the keyframes rules as they have no effect there. The animation timing is defined for the element and has no meaning as part of a keyframe because the timing is already in action.#crossfade > img ’ where you have it as linear.
If you want ease-in-out then change it on '