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％，

CSS3动画幻灯片

1 个答案: