Full background image with fade effect

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>