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

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>

Answer 1

#-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/