3

I am making a background-image fading animation using CSS and it works as expected the first time it runs through the loop, but the second time it gets stuck on the last image throughout the duration, briefly jumps to the third image, then back to the last one.

How can I update it so it runs smoothly through the animation during each of the infinite loops?

#rotate {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 0;
}

#rotate li {
  animation: func 16s linear 0s infinite;
  list-style-type: none;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  background: no-repeat 50% 30% / cover;
  opacity: 0;
}

#rotate li:nth-child(1) {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
}

#rotate li:nth-child(2) {
  animation-delay: 4s;
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
}

#rotate li:nth-child(3) {
  animation-delay: 8s;
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -o-animation-delay: 8s;
}

#rotate li:nth-child(4) {
  animation-delay: 12s;
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
}

@keyframes func {
  0%,
  100% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  5%,
  90% {
    opacity: 1;
  }
}
<ul id="rotate">
  <li style="background-image: url('https://dummyimage.com/600x400/000/fff&text=one')"></li>
  <li style="background-image: url('https://dummyimage.com/600x400/000/fff&text=two')"></li>
  <li style="background-image: url('https://dummyimage.com/600x400/000/fff&text=three');"></li>
  <li style="background-image:url('https://dummyimage.com/600x400/000/fff&text=four')"></li>
</ul>

And a link to Codepen sample: https://codepen.io/erinpearson/pen/YvxVRM?editors=1100

Sebastian Speitel
  • 7,166
  • 2
  • 19
  • 38
littlepear68
  • 33
  • 2

1 Answers1

1

Change opacity in @keyframes.

#rotate {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 0;
}

#rotate li {
  animation: func 16s linear 0s infinite;
  list-style-type: none;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  background: no-repeat 50% 30% / cover;
  opacity: 0;
}

#rotate li:nth-child(1) {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
}

#rotate li:nth-child(2) {
  animation-delay: 4s;
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
}

#rotate li:nth-child(3) {
  animation-delay: 8s;
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -o-animation-delay: 8s;
}

#rotate li:nth-child(4) {
  animation-delay: 12s;
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
}

@keyframes func {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
<ul id="rotate">
  <li style="background-image: url('https://dummyimage.com/600x400/000/fff&text=one')"></li>
  <li style="background-image: url('https://dummyimage.com/600x400/000/fff&text=two')"></li>
  <li style="
  background-image: url('https://dummyimage.com/600x400/000/fff&text=three');"></li>
  <li style="background-image: url('https://dummyimage.com/600x400/000/fff&text=four')"></li>
</ul>
Tushar
  • 4,280
  • 5
  • 24
  • 39