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>