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>
```
<a href="https://codepen.io/mateustav/embed/RZjgYL/">And here's my Pen if you want to see it live.</a>
<iframe height='262' scrolling='no' title='Background fade effect' src='//codepen.io/mateustav/embed/RZjgYL/?height=262&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/mateustav/pen/RZjgYL/'>Background fade effect</a> by Mateus (<a href='https://codepen.io/mateustav'>@mateustav</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>