CSS3 animation slideshow

Question

Got a small img slideshow running with animation/keyframes, it has 4 images running 6 seconds each on a 24s infinite loop, The problem is that when it runs through once, the transition is fine, once it has gone through the 4 images and repeats, there is a good 2-3 seconds after an image fades out and the next one fades in.

First time using animation and keyframes so i'm not 100% what i've done wrong. The slide show is running in a div called .slideshow I've taken out most prefixes for space and readability:

/* CSS */


.slideshow figure:nth-child(4) {
-webkit-animation: xfade 24s 0s  infinite;
animation: xfade 24s 0s infinite;
}
.slideshow figure:nth-child(3) {
-webkit-animation: xfade 24s 6s infinite;
animation: xfade 24s 6s infinite;
}
.slideshow figure:nth-child(2) {
-webkit-animation: xfade 24s 12s infinite;
animation: xfade 24s 12s infinite;
}
.slideshow figure:nth-child(1) {
-webkit-animation: xfade 24s 18s infinite;
animation: xfade 24s 18s infinite;
}

@keyframes "xfade" {
 0% {
    opacity: 1;
 }
14% {
opacity: 1;
}
16% {
    opacity: 0;
} 
90% {
    opacity: 0;
 }
 100% {
    opacity: 1;
 }
}

Not a duplicate, having a problem with a single image slideshow that loops fine for the first 24s, then a major 2-3 gap between images every time after..

possible duplicate of Smooth Infinite Scrolling Banner [CSS Only] — sergdenisov
@SergeyDenisov not duplicate at all.. I'm having problems with a 4 image slideshow that loops fine for the first 24s then has a 2-3 second gap from when the image fades out til the next fades in after it has looped once... — joshuaaron

maioman maioman · Accepted Answer · 2015-05-27T22:42:25

Try changing the xfade animation to

@keyframes "xfade" {
  0% {
  opacity: 1;
  }
  25% {
  opacity: 1;
  }
  26% {
  opacity: 0;
  } 
  100% {
  opacity: 0;
  }
}

Logically since the images are 4 the cycle should be 25%,

CSS3 animation slideshow

1 Answers