html - 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%，