Full background image with fade effect

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:

1. 0%
2. a/t*100%
3. (a+b)/t*100% = 1/n*100%
4. 100%-(b/t*100%)
5. 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>