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>