I'm trying to build a simple carousel that fades the background images of an element in & out. The animation runs smoothly until the loop time, when the first figure element fades in and the last figure element is still fading out. That is intentional of course, but it seems that the last figure sticks around longer than the other figures.
There are 4 figure elements. Wait until the last figure starts fading out. You'll understand what I'm talking about
Here's the code I'm using:
<style>
.fullscreen-bg {
position: absolute;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.crossfade > figure {
animation: fadeBackground 12s linear infinite;
backface-visibility: hidden;
background-size: contain;
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('http://www.drodd.com/images15/1-7.jpg');
}
.crossfade > figure:nth-child(2) {
animation-delay: 3s;
background-image: url('http://www.drodd.com/images15/2-23.jpg');
}
.crossfade > figure:nth-child(3) {
animation-delay: 6s;
background-image: url('http://www.drodd.com/images15/3-12.jpg');
}
.crossfade > figure:nth-child(4) {
animation-delay: 9s;
background-image: url('http://www.drodd.com/images15/4-7.jpg');
}
@keyframes fadeBackground {
0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
</style>
<div class="fullscreen-bg crossfade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</div>
And here's my Pen if you want to see it live.
