I have implemented a cross-fading image animation in CSS that transitions between two images. I am looking for guidance on how to adjust the duration of each image display to approximately 10 seconds instead of an instant transition. The total animation length is set to 3 seconds, and I want each image to remain visible for 10 seconds before switching to the next one. It seems like I need to modify the code related to opacity and percentage values, but I'm struggling with the syntax. Any assistance would be greatly appreciated. Below is the snippet of my current code. You can also find a fiddle here if it helps.
CSS Code:
/*INDEX PAGE CSS*/
#index_banner {
height:360px;
position:relative;
margin:0 auto;
}
#index_banner img {
position:absolute;
-webkit-animation: cf4FadeInOut 3s;
animation: cf4FadeInOut 3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes cf4FadeInOut {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes cf4FadeInOut {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
#index_banner img:nth-child(odd) {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
#welcome_text {
padding-top: 20px;
text-align: center;
line-height: 2em;
}
#trailer_title {
text-align: center;
}
#trailer_video {
padding-top: 10px;
text-align: center;
padding-bottom:20px;
}
HTML Code:
<div id="index_banner">
<img class="bottom" src="images/SPAWN IMAGE.png" alt="INDEX BANNER">
<img class="top" src="images/SURVIVAL IMAGE - GAMEMODES.png" alt="INDEX BANNER 2">
</div>