I would like to cross-fade between several images using CSS only, and then loop through that animation indefinitely. I used the methodology provided by Zack White in this question, which does fade between images, but after the first loop through the entire animation, there is a "partial fade to black" between each image.
It's almost as though one image is "fading out" before the other "fades in" enough to entirely obscure the background?
How do I modify the animation so that the images smoothly fade from one to the next? Essentially, I want the new image to "fade in" on top of the previous image, and then loop indefinitely through all the images.
Fiddle here with the CSS and HTML shown below: https://jsfiddle.net/xg0Lsa6f/
.fader5 {
position: relative !important;
background: black;
}
.fader5 img {
position: absolute !important;
left: 0;
top: 0;
-webkit-animation: fader5fade 10s infinite;
animation: fader5fade 10s infinite;
}
@keyframes fader5fade {
0% {
opacity: 1;
}
10% {
opacity: 1;
}
20% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fader5 img:nth-of-type(5) {
animation-delay: 0s;
}
.fader5 img:nth-of-type(4) {
animation-delay: 2s;
}
.fader5 img:nth-of-type(3) {
animation-delay: 4s;
}
.fader5 img:nth-of-type(2) {
animation-delay: 6s;
}
.fader5 img:nth-of-type(1) {
animation-delay: 8s;
position: relative !important;
}<p class="fader5">
<img src="https://live.staticflickr.com/65535/54578463678_c27eb53860_n.jpg" />
<img src="https://live.staticflickr.com/65535/54578567065_025ae037e7_n.jpg" />
<img src="https://live.staticflickr.com/65535/54578417269_740e2f5846_n.jpg" />
<img src="https://live.staticflickr.com/65535/54578463698_eccddf3374_n.jpg" />
<img src="https://live.staticflickr.com/65535/54577373532_f92b4ab806_n.jpg" />
</p>
<p>
The first time through the images seem to transition smoothly from one to the next; subsequent times through, they seeme to "fade through black." How do I make them transition smoothly, "stacking" on each other, rather than fading through black/the background color?
</p>