Css3 Fade In Fade Out transition without javascript/jquery using .png image

Question

I want a smooth css3 slider which is having .png images. On start all the images are displayed for once after that it works fine. I need help to hide three images that are loading when transition starts.

If anybody can help... would be very glad.

PS : I am working on some tool which is restricted use of jquery/javascript. Due to which many solution to my problem aren't implementable.

@-webkit-keyframes cf4FadeInOut {
0% {
    opacity:1;
  }
  15% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  90% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes cf4FadeInOut {
 0% {
    opacity:1;
  }
  15% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  90% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes cf4FadeInOut {
0% {
    opacity:1;
  }
  15% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  90% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes cf4FadeInOut {
0% {
    opacity:1;
  }
  15% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  90% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#cf4a {
  position:relative;
  height:571px;
  width:931px;
  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: 24s;

  -moz-animation-name: cf4FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 24s;

  -o-animation-name: cf4FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 24s;

  animation-name: cf4FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 24s;
}
#cf4a img:nth-of-type(4) {
 
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  animation-delay: 18s;
}
#cf4a img:nth-of-type(3) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
  
}
#cf4a img:nth-of-type(2) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
  visibility: visible;
}
#cf4a img:nth-of-type(1) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
  
}

<div id="cf4a" class="shadow">
 <img src="header-img-1.png"  />
     <img src="header-img-2.png" />
    <img  src="header-img-3.png" />
        <img src="header-img-4.png"  />
        
</div>

Welcome to StackOverflow. Some tips/questions: Did you search any where else before asking here? Is this question asked before on stackoverflow? [Simular question](http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load). Here are the guidlines for asking a good question: [Link](http://stackoverflow.com/help/how-to-ask) — Persijn, Nov 02 '15 at 10:08
@Persijn... I have searched ..... but its not relevant to my problem.Thanks for replying. — Adit Shah, Nov 02 '15 at 10:12
I would like to help but your question is not clearly asked. What do you mean with: "I need help to hide three images that are loading when transition starts"? Could you explain more in detail what you mean by that. Do you want to hide the images when they are displayed? Do you want to hide images after the page is loaded? — Persijn, Nov 02 '15 at 10:16
@Persijn .. Sure Buddy. I have slider with four images . When you visit the page first time you will see all four images above each other and then once the first transistion gets completed ... it works fine like fadin and fadeout after each other. So I just want to hide the remaning 3 images. — Adit Shah, Nov 02 '15 at 10:20

score 0 · Answer 1 · answered Nov 02 '15 at 10:57

@-webkit-keyframes cf4FadeInOut {
0% {
    opacity:1;
  }
  15% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  90% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes cf4FadeInOut {
 0% {
    opacity:1;
  }
  15% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  90% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes cf4FadeInOut {
0% {
    opacity:1;
  }
  15% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  90% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes cf4FadeInOut {
0% {
    opacity:1;
  }
  15% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  90% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#cf4a {
  position:relative;
  height:571px;
  width:931px;
  margin:0 auto;
}
#cf4a img {
  position:absolute;
  left:0;
}


 #cf4a img {
-webkit-animation: cf4FadeInOut 24s ease-in-out infinite;
-moz-animation: cf4FadeInOut 24s ease-in-out infinite;
-o-animation: cf4FadeInOut 24s ease-in-out infinite;
 animation: cf4FadeInOut 24s ease-in-out infinite;
}
#cf4a img:nth-child(4) {
 
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  animation-delay: 18s;
}
#cf4a img:nth-child(3) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
  
}
#cf4a img:nth-child(2) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
  visibility: visible;
}
#cf4a img:nth-child(1) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
  
}

<div id="cf4a" class="shadow">
 <img src="header-img-1.png"  />
     <img src="header-img-2.png" />
    <img  src="header-img-3.png" />
        <img src="header-img-4.png"  />
        
</div>

I hope this solves your problem, thy this working fiddle https://jsfiddle.net/3t8qysk6/

Css3 Fade In Fade Out transition without javascript/jquery using .png image

1 Answers1