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\]](http://stackoverflow.com/questions/30032646/smooth-infinite-scrolling-banner-css-only) — sergdenisov, May 27 '15 at 17:26
@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, May 27 '15 at 22:36

score 1 · Answer 1 · answered May 27 '15 at 22:42

1

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%,

answered May 27 '15 at 22:42

maioman

18,154
4
36
42

thanks a lot, i didn't know you had to seperate it in %'s for number of slides, seems to be working near perfect other than the last jump has a very minimal fade. – joshuaaron May 27 '15 at 23:19

CSS3 animation slideshow

1 Answers1