multiple image fade

[rolandbaker]

Hi,
I am new to CSS so please be gentle! I have good HTML code knowledge and a small amount of CSS. I am creating a new website for my business and I wanted the home page to have 4 images that crossfade. I copied and pasted some code which i have working but I have 2 problems:
1. I can figure out what to change in the code to change the duration that each images stays on screen.
2. I have a JS drop down menu above the crossfading images that now drops down being the CSS images.
This is the code I have used:
@-webkit-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@-moz-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@-o-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#cf4a {
position:relative;
height:440px;
width:1000px;
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: 8s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;
-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
#cf4a img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
#cf4a img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#cf4a img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
#cf4a img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}

and this is the site where it is from:
http://css3.bradshawenterprises.com/cfimg/
The code is from demo 3 under the section "Demo with multiple images"
The formula to change is this according to the site:
For "n" images You must define:
a=presentation time for one image
b=duration for cross fading
Total animation-duration is of course t=(a+b)*n
animation-delay = t/n or = a+b
Percentage for keyframes:
0%
a/t*100%
(a+b)/t*100% = 1/n*100%
100%-(b/t*100%)
100%
I want the images to stage on screen for around 6 seconds before crossfading.
I didn't find a right solution on the internet.
Reference:
-https://csscreator.com/topic/css-multiple-image-fade
-Sales Video Examples

[Susan]

I’m going to close this thread, as it is very old and unanswered. I am hoping that you were able to find your solution in the meantime.

As a reminder, this is a community forum, manned by volunteers, so not all posts will be responded to.

In the meantime, if you haven’t already done so, I recommend joining the #GenesisWP Slack community: https://genesiswp.slack.com

Or the #GenesisWP Facebook group: https://www.facebook.com/groups/genesiswp/

[Author]

Posts