Full background image with fade effect - css

Question

.crossfade > div {
animation: imageAnimation 30s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: fixed;
top: 0px;
width: 100%;
z-index: 0;
}
.crossfade {
height: 500px;
}
#fade1{
background-image: url('../images/taxi.jpg');
}
#fade2 {
animation-delay: 6s;
background-image: url('../images/default.jpg');
}
#fade3 {
animation-delay: 12s;
background-image: url('../images/neuroBG.JPG');
}
#fade4 {
animation-delay: 18s;
background-image: url('../images/new4.jpeg');
}
#fade5 {
animation-delay: 24s;
background-image: url('../images/new3.jpg');
}
#fade6 {
animation-delay: 30s;
background-image: url('../images/new1.jpg');
}
#fade7 {
animation-delay: 36s;
background-image: url('../images/new2.jpeg');
}
<div class="crossfade">
<div id="fade1"></div>
<div id="fade2"></div>
<div id="fade3"></div>
<div id="fade4"></div>
<div id="fade5"></div>
<div id="fade6"></div>
<div id="fade7"></div>
</div>
I will like to make a background image fade in and out just like this website www.flitways.com
I have tried replicate this but the images are not fading in properly. I just feel that there is something missing. Will appreciate any help as regards this. Thanks.

Answer 1

To make images fade in and out properly, one need to calculate percentages and timings for it to look good, as done below, or simply give each image a #keyframes rule of their own.
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%
Src: http://css3.bradshawenterprises.com/cfimg/
.crossfade > div {
animation: imageAnimation 8s linear infinite;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
.crossfade {
height: 500px;
}
#keyframes imageAnimation {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
.crossfade div:nth-of-type(1) {
background-image: url(http://placehold.it/200/f00);
animation-delay: 6s;
}
.crossfade div:nth-of-type(2) {
background-image: url(http://placehold.it/200/0b0);
animation-delay: 4s;
}
.crossfade div:nth-of-type(3) {
background-image: url(http://placehold.it/200/00f);
animation-delay: 2s;
}
.crossfade div:nth-of-type(4) {
background-image: url(http://placehold.it/200/ff0);
animation-delay: 0;
}
<div class="crossfade">
<div></div>
<div></div>
<div></div>
<div></div>
</div>