首页 文章

CSS3动画幻灯片

提问于
浏览 次
0

得到了一个用动画/关键帧运行的小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间隙..

html css css3

1 回答

  • 1

    尝试将 xfade 动画更改为

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

    逻辑上，因为图像是4，所以周期应该是25％，

    回复于

相关问题