Why is last element in the fade in/out animation taking too long to fade out?

HTML & CSS
#1

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>
#2

Hi there Mateus,

this modification works OK for me…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<base href="http://www.drodd.com/images15/">
<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
#numbers {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
 }

#numbers > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    animation: fadeBackground 12s ease-in-out infinite ;
    backface-visibility: hidden;
    background-size: contain;
    background-position: center center;
    opacity: 0;
 }
#numbers div:nth-child(1) {
    background-image: url(1-7.jpg);
 }
#numbers div:nth-child(2) {
    animation-delay: 3s;
    background-image: url(2-23.jpg);
 }
#numbers div:nth-child(3) {
    animation-delay: 6s;
    background-image: url(3-12.jpg);
 }
#numbers div:nth-child(4) {
    animation-delay: 9s;
    background-image: url(4-7.jpg);
 }
@keyframes fadeBackground {
    0% { opacity: 0; }
  8.5% { opacity: 1; }
   17% { opacity: 1; }
 25.5% { opacity: 1; }
   34% { opacity: 0; }
 }
</style>

</head>
<body> 

<div id="numbers">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

</body>
</html>

coothead

2 Likes
#3

It works like a charm. Thank you, @coothead!

#4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.