Full background image with fade effect

.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.

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>

来源：https://stackoverflow.com/questions/40316527/full-background-image-with-fade-effect

标签

css

html5

background-image