html - CSS 交叉淡入淡出动画

Question

我使用 CSS 创建了一个交叉淡入淡出，但我在计时方面遇到了困难。我想要 4 秒延迟或每张图像之间 4 秒，但它不起作用。

#cf {
  position:absolute;
  margin:0 auto;
    width: 100%;
    height: 100%;
    top: 0;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
    z-index: -1;
}

@-webkit-keyframes cf4FadeInOut {
 0% {
  opacity:1;
}
15% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

@-moz-keyframes cf4FadeInOut {
 0% {
  opacity:1;
}
15% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

@-o-keyframes cf4FadeInOut {
 0% {
  opacity:1;
}
15% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

@keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
15% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf img {
  animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-direction: alternate;
}

#cf img:nth-of-type(1) { /* Wakame */
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  animation-delay: 24s;
}
#cf img:nth-of-type(2) { /*Meraki */
  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  -o-animation-delay: 20s;
  animation-delay: 20s;
}
#cf img:nth-of-type(3) { /* Trabzoni */
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -o-animation-delay: 16s;
  animation-delay: 16s;
}
#cf img:nth-of-type(4) { /* SPS */
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}

#cf img:nth-of-type(5) { /* Balad */
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}

#cf img:nth-of-type(6) { /* Wesal */
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}

<div id="cf">
   <img class="img-responsive" src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ezreal_0.jpg" />
   <img class="img-responsive" src="http://vignette2.wikia.nocookie.net/leagueoflegends/images/6/6b/Ezreal_NottinghamSkin.jpg/revision/latest?cb=20160518164441" />
   <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/originals/a3/99/59/a399593448b739ee3cb164f74f22d89a.jpg" />
   <img class="img-responsive" src="https://i.ytimg.com/vi/nOmafJzhUrk/maxresdefault.jpg" />
   <img class="img-responsive" src="http://art-of-lol.com/wp-content/uploads/2015/12/ezreal_by_cglas-d8smd2g.jpg" />
   <img class="img-responsive" src="http://pre14.deviantart.net/81ae/th/pre/i/2015/345/5/c/ezreal_by_tanzenkat-d9jrcvc.jpg" />
   </div>

此外，除了时间之外，当图像交叉淡入淡出时，在第二张图像之后，它会继续回到第一张，而其余的不会显示或很快显示和淡出。

Answer 1

I want 4 seconds delay or 4 seconds between each image but it's not working

为了获得正确的时间，您需要牢记一些计算。

1. 确定每张图片需要多长时间才能淡入。假设您希望1 秒让图片从 0 不透明度淡入到 1。
2. 确定每张图片应显示多长时间。假设您希望图像保持 1 不透明度 4 秒。
3. 确定下一张图片需要多长时间才能开始。这将成为两个图像之间的间隔。这应该大于您在步骤 #2 中获得的值。你有 1s 显示，4s 保持显示。所以这至少是 5 秒。将此增量应用到每个图像的 animation-delay。
4. 将此数字乘以图片总数。这将成为总 animation-duration。在这种情况下，您在步骤 #3 中计算了 5s，并且您有 6 张图像。所以你的 animation-duration 将是 5 x 6 = 30 即 30 秒。
5. 将 100% 除以您在第 4 步中得到的数字。这将成为关键帧。在这种情况下，您有 30 秒的总动画持续时间。因此，您的关键帧将以 100%/30 = 3.33 为步长，即每个关键帧的 3.33%。这每一帧将代表 1 秒。
6. 在这些帧上推断您的第 1 步和第 2 步值。即对于 3.33%，您将有 opacity: 1 以在 1 秒后显示图像。然后对于 6.66%、9.99% 和 13.33% 中的每一个，它将保持为 opacity:1。即从 0 开始的 4 秒内，图像将保持可见。然后在 16.65 帧上将不透明度恢复为 0。即在第 5 秒图像将淡出。然后将保持隐藏状态直到 100%，即直到所有剩余的 25 秒。

把这些放在一起，你会得到:

从第 3 步开始:

#cf img:nth-child(1) { animation-delay: 0s; }
#cf img:nth-child(2) { animation-delay: 5s; }
#cf img:nth-child(3) { animation-delay: 10s; }
#cf img:nth-child(4) { animation-delay: 15s; }
#cf img:nth-child(5) { animation-delay: 20s; }
#cf img:nth-child(6) { animation-delay: 25s; }

从第 4 步开始:

#cf img { animation: fader 30s linear infinite; }

并且，从第 5 步和第 6 步(从第 1 步和第 2 步推断):

@keyframes fader {
    0% { opacity: 0; } 
    03.33% { opacity: 1; }
    06.66% { opacity: 1; }
    09.99% { opacity: 1; }
    13.33% { opacity: 1; }
    16.65% { opacity: 0; }
    100% { opacity: 0; }
}

就是这样。这是完整的片段:

片段:

html, body { height: 100%; width: 100%; overflow: hidden; }
#cf {
  position: relative; margin: 0 auto; 
  width: 100%; height: 100%;
}
#cf img { 
  position: absolute; left: 0; top: 0; opacity: 0; 
  animation: fader 30s linear infinite;
}

#cf img:nth-child(1) { animation-delay: 0s; }
#cf img:nth-child(2) { animation-delay: 5s; }
#cf img:nth-child(3) { animation-delay: 10s; }
#cf img:nth-child(4) { animation-delay: 15s; }
#cf img:nth-child(5) { animation-delay: 20s; }
#cf img:nth-child(6) { animation-delay: 25s; }

@keyframes fader {
  0% { opacity: 0; } 
  03.33% { opacity: 1; }
  06.66% { opacity: 1; }
  09.99% { opacity: 1; }
  13.33% { opacity: 1; }
  16.65% { opacity: 0; }
  100% { opacity: 0; }
}

<div id="cf">
  <img class="img-responsive" src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ezreal_0.jpg" />
  <img class="img-responsive" src="http://vignette2.wikia.nocookie.net/leagueoflegends/images/6/6b/Ezreal_NottinghamSkin.jpg/revision/latest?cb=20160518164441" />
  <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/originals/a3/99/59/a399593448b739ee3cb164f74f22d89a.jpg" />
  <img class="img-responsive" src="https://i.ytimg.com/vi/nOmafJzhUrk/maxresdefault.jpg" />
  <img class="img-responsive" src="http://art-of-lol.com/wp-content/uploads/2015/12/ezreal_by_cglas-d8smd2g.jpg" />
  <img class="img-responsive" src="http://pre14.deviantart.net/81ae/th/pre/i/2015/345/5/c/ezreal_by_tanzenkat-d9jrcvc.jpg" />
</div>