I've been experimenting with applying a CSS-only background image transition to a div, but I encountered an issue where after cycling through three specified images, the background reverts back to the original black color. Even stranger, when I adjust the transition times to 4 seconds, one of the images doesn't display at all. Can anyone provide a solution or insight on this? The page in question can be accessed here (link removed)
CSS: * { padding: 0; margin: 0 }
body {
background-color: #000000;
}
.crossfade > figure {
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: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
.crossfade > figure:nth-child(1) {
background-image: url('assets/img/landing/gym_1.jpg');
}
.crossfade > figure:nth-child(2) {
animation-delay: 6s;
background-image: url('assets/img/landing/gym_2.jpg');
}
.crossfade > figure:nth-child(3) {
animation-delay: 12s;
background-image: url('assets/img/landing/weights.jpg');
}
@keyframes imageAnimation {
0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
HTML:
<div class="crossfade">
<figure></figure>
<figure></figure>
<figure></figure>