CSS3 动画幻灯片

Question

有一个带有动画/关键帧的小型 img 幻灯片，它有 4 个图像，每个图像在 24 秒无限循环中运行 6 秒， 问题是，当它运行一次时，过渡很好，一旦它通过了 4 个图像并重复，在一个图像淡出和下一个图像淡入之后有 2-3 秒的时间。

第一次使用动画和关键帧，所以我不是 100% 做错了什么。幻灯片放映在名为 .slideshow 的 div 中运行 为了空间和可读性，我去掉了大部分前缀：

/* 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;
 }
}

不是重复的，在前 24 秒内循环正常的单个图像幻灯片存在问题，之后每次图像之间都会出现 2-3 的主要间隙..

Answer 1

尝试将xfade 动画更改为

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

从逻辑上讲，由于图像为 4，因此周期应为 25%，