CSS 淡入淡出动画延迟计时

Question

我正在尝试使用 css3 创建幻灯片效果，我有三个图像，我需要将它们相互淡入。 - 每次过渡需要持续 3 秒。

第一张图片显示 3 秒，然后淡入第 2 张，同样淡入第三

张

我不确定如何计算关键帧的百分比。

代码笔 http://codepen.io/anon/pen/MYmPYp

 @-webkit-keyframes cf4FadeInOut {
   0% {
     opacity: 1;
   }
   17% {
     opacity: 1;
   }
   25% {
     opacity: 1;
   }
   92% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
 }
 @-moz-keyframes cf4FadeInOut {
   0% {
     opacity: 1;
   }
   17% {
     opacity: 1;
   }
   25% {
     opacity: 1;
   }
   92% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
 }
 @-ms-keyframes cf4FadeInOut {
   0% {
     opacity: 1;
   }
   17% {
     opacity: 1;
   }
   25% {
     opacity: 1;
   }
   92% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
 }
 @keyframes cf4FadeInOut {
   0% {
     opacity: 1;
   }
   17% {
     opacity: 1;
   }
   25% {
     opacity: 1;
   }
   92% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
 }
 .team-img {
   position: relative;
   height: 329px;
   width: 450px;
 }
 .team-img img {
   position: absolute;
   left: 0;
   z-index: 0;
   -webkit-animation-name: cf4FadeInOut;
   -moz-animation-name: cf4FadeInOut;
   -ms-animation-name: cf4FadeInOut;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   -webkit-animation-timing-function: ease-in-out;
   animation-timing-function: ease-in-out;
   -webkit-animation-duration: 9s;
   -moz-animation-duration: 9s;
   -ms-animation-duration: 9s;
 }
 .team-img img:nth-of-type(1) {
   -webkit-animation-name: cf4FadeInOut;
   -moz-animation-name: cf4FadeInOut;
   -ms-animation-name: cf4FadeInOut;
   -webkit-animation-delay: 3s;
   -moz-animation-delay: 3s;
   -ms-animation-delay: 3s;
 }
 .team-img img:nth-of-type(2) {
   -webkit-animation-name: cf4FadeInOut;
   -moz-animation-name: cf4FadeInOut;
   -ms-animation-name: cf4FadeInOut;
   -webkit-animation-delay: 6s;
   -moz-animation-delay: 6s;
   -ms-animation-delay: 6s;
 }
 .team-img img:nth-of-type(3) {
   -webkit-animation-name: cf4FadeInOut;
   -moz-animation-name: cf4FadeInOut;
   -ms-animation-name: cf4FadeInOut;
   -webkit-animation-delay: 9s;
   -moz-animation-delay: 9s;
   -ms-animation-delay: 9s;
 }

<div class="team-img">
  <img width="200px" height="200px" src="http://blackdogballroom.co.uk/nws/wp-content/uploads/sites/2/2014/11/BDB-290212-Img-048.jpg">
  <img width="200px" height="200px" src="http://3.bp.blogspot.com/-I2TYXJ3lDYw/UFsjvkedaXI/AAAAAAAAE-w/7EYzTeZMpsc/s1600/00Halloween+Spooks.JPG">
  <img width="200px" height="200px" src="http://blog.lafraise.com/fr/wp-content/uploads/2013/11/Free-hug-zoneinfinite.jpg">
</div>

我已经绞尽脑汁几个小时了，慢慢失去了意志。我毫不费力地用谷歌搜索过。

谢谢担

Answer 1

您需要

定义三种不同的@keyframes来实现此目的。

@-webkit-keyframes two {
  0% { opacity: 0; }
  8.3% { opacity: 0; }
  16.6% { opacity: 0; }
  24.9% { opacity: 0; }
  33.2% { opacity: 1; }
  41.5% { opacity: 1; }
  49.5% { opacity: 1; }
  58.1% { opacity: 1; }
  66.4% { opacity: 0; }
  74.7% { opacity: 0; }
  83% { opacity: 0; }
  91.3% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes two {
  0% { opacity: 0; }
  8.3% { opacity: 0; }
  16.6% { opacity: 0; }
  24.9% { opacity: 0; }
  33.2% { opacity: 1; }
  41.5% { opacity: 1; }
  49.5% { opacity: 1; }
  58.1% { opacity: 1; }
  66.4% { opacity: 0; }
  74.7% { opacity: 0; }
  83% { opacity: 0; }
  91.3% { opacity: 0; }
  100% { opacity: 0; }
}
@-webkit-keyframes three {
  0% { opacity: 0; }
  8.3% { opacity: 0; }
  16.6% { opacity: 0; }
  24.9% { opacity: 0; }
  33.2% { opacity: 0; }
  41.5% { opacity: 0; }
  49.5% { opacity: 0; }
  58.1% { opacity: 0; }
  66.4% { opacity: 1; }
  74.7% { opacity: 1; }
  83% { opacity: 1; }
  91.3% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes three {
  0% { opacity: 0; }
  8.3% { opacity: 0; }
  16.6% { opacity: 0; }
  24.9% { opacity: 0; }
  33.2% { opacity: 0; }
  41.5% { opacity: 0; }
  49.5% { opacity: 0; }
  58.1% { opacity: 0; }
  66.4% { opacity: 1; }
  74.7% { opacity: 1; }
  83% { opacity: 1; }
  91.3% { opacity: 1; }
  100% { opacity: 0; }
}
.team-img {
  position: relative;
  height: 329px;
  width: 450px;
}
.team-img img {
  position: absolute;
  left: 0;
  z-index: 0;
}
.team-img img:nth-of-type(2) {
  -webkit-animation: two 11s ease-in-out infinite forwards;
  animation: two 11s ease-in-out infinite forwards;
}
.team-img img:nth-of-type(3) {
  -webkit-animation: three 11s ease-in-out infinite forwards;
  animation: three 11s ease-in-out infinite forwards;
}

<div class="team-img">
  <img width="200px" height="200px" src="http://blackdogballroom.co.uk/nws/wp-content/uploads/sites/2/2014/11/BDB-290212-Img-048.jpg">
  <img width="200px" height="200px" src="http://3.bp.blogspot.com/-I2TYXJ3lDYw/UFsjvkedaXI/AAAAAAAAE-w/7EYzTeZMpsc/s1600/00Halloween+Spooks.JPG">
  <img width="200px" height="200px" src="http://blog.lafraise.com/fr/wp-content/uploads/2013/11/Free-hug-zoneinfinite.jpg">
</div>

Answer 2

您不需要对第一个图像进行动画处理，只需要对第二个和第三个图像进行动画处理。它使代码更短：

.team-img {
  position: relative;
  height: 329px;
  width: 450px;
}
.team-img img {
  position: absolute;
  left: 0;
  top: 0;
}
.team-img img:nth-of-type(2) {
  opacity: 0;
  -webkit-animation: fading2 ease 14s infinite;  
  animation: fading2 ease 14s infinite;
}
.team-img img:nth-of-type(3) {
  opacity: 0;
  -webkit-animation: fading3 ease 14s infinite;  
  animation: fading3 ease 14s infinite;
}
@-webkit-keyframes fading2 {
  0%: { opacity: 0;}
  21% { opacity: 0;}
  35% { opacity: 1;}
  93% { opacity: 1;}
  100% { opacity: 0;}
}
@keyframes fading2 {
  0%: { opacity: 0;}
  21% { opacity: 0;}
  35% { opacity: 1;}
  93% { opacity: 1;}
  100% { opacity: 0;}
}
@-webkit-keyframes fading3 {
  0%: { opacity: 0;}
  56% { opacity: 0;}
  70% { opacity: 1;}
  93% { opacity: 1;}
  100% { opacity: 0;}
}
@keyframes fading3 {
  0%: { opacity: 0;}
  56% { opacity: 0;}
  70% { opacity: 1;}
  93% { opacity: 1;}
  100% { opacity: 0;}
}

<div class="team-img">
   <img width="200px" height="200px" src="http://blackdogballroom.co.uk/nws/wp-content/uploads/sites/2/2014/11/BDB-290212-Img-048.jpg">
   <img width="200px" height="200px" src="http://3.bp.blogspot.com/-I2TYXJ3lDYw/UFsjvkedaXI/AAAAAAAAE-w/7EYzTeZMpsc/s1600/00Halloween+Spooks.JPG">
   <img width="200px" height="200px" src="http://blog.lafraise.com/fr/wp-content/uploads/2013/11/Free-hug-zoneinfinite.jpg">
</div>