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

我想4秒延迟或每个图像在4秒，但它不是 工作

为了得到合适的时机，你需要记住一些计算。

1. 确定每个图像需要多长时间在褪色。比方说，你想1秒在图像中从0到不透明渐变到1
2. 确定多久每个图像应保持可见。假设您希望图像保持在1不透明度，对于4秒。
3. 确定下一张图像需要多长时间才能开始。这将成为两幅图像之间的间隔。这应该比你在步骤＃2得到的更大。你有1秒出现，4秒钟才能显示出来。所以这将至少是5秒。以增量形式将其应用于每张图片的animation-delay。
4. 将此数字乘以图像总数。这将变成总计animation-duration。在这种情况下，您在步骤＃3中计算5秒，并且您有6个图像。所以你的animation-duration将是5 x 6 = 30，即30秒。
5. 按步骤＃4中得到的数字除以100%。这将成为keyframes。在这种情况下，您有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>