CSS圖像交叉淡化不能正常工作

-1

但是，我有三個圖像，在第三張圖像的末尾屏幕變爲空白。經過很長一段時間後，第一張圖像再次出現，但我希望它在第三張圖像後立即重現。真的很感謝我能得到的任何幫助。謝謝。 https://jsfiddle.net/5pk3zycq/CSS圖像交叉淡化不能正常工作

下面是代碼：

#crossfade > img { 
 
width: 100%; 
 
height: 100%; 
 
position: absolute; 
 
top: 0px; 
 
left: 0px; 
 
color: transparent; 
 
opacity: 0; 
 
z-index: 0; 
 
-webkit-backface-visibility: hidden; 
 
-webkit-animation: imageAnimation 30s linear infinite 0s; 
 
-moz-animation: imageAnimation 30s linear infinite 0s; 
 
-o-animation: imageAnimation 30s linear infinite 0s; 
 
-ms-animation: imageAnimation 30s linear infinite 0s; 
 
animation: imageAnimation 30s linear infinite 0s; 
 
} 
 

 
#crossfade > img:nth-child(2) { 
 
background-image: url(images/background-2.jpg); 
 
-webkit-animation-delay: 6s; 
 
-moz-animation-delay: 6s; 
 
-o-animation-delay: 6s; 
 
-ms-animation-delay: 6s; 
 
animation-delay: 6s; 
 
} 
 

 
#crossfade > img:nth-child(3) { 
 
background-image: url(images/background-3.png); 
 
-webkit-animation-delay: 12s; 
 
-moz-animation-delay: 12s; 
 
-o-animation-delay: 12s; 
 
-ms-animation-delay: 12s; 
 
animation-delay: 12s; 
 
}

<div id="crossfade"> 
 
    <img src="images/background-1.jpg" alt="Image 1"> 
 
    <img src="images/background-2.jpg" alt="Image 2"> 
 
    <img src="images/background-3.png" alt="Image 3"> 
 
</div>

來源

2017-05-14 Shikz

我建議複製這個jsfiddle或codepen，或作爲一個片段在這裏。 – Toby

'imageAnimation'裏面有什麼？請發佈所有代碼...... –

啊，是的，對不起，我對這個和jsfiddle有點新。這裏是。 https://jsfiddle.net/5pk3zycq/ – Shikz

不是你的問題簡單地認爲你的動畫循環設置爲30秒，而不是18？

來源

2017-05-14 19:33:57 WahhabB

我相信這不是動畫循環。 Imageanimation是我希望顯示圖像的時間長度。 – Shikz

是的，改變了這一點，它的工作原理：D只需要調整不透明度，以便在下一張圖像之前不會完全變黑。感謝您的建議！ :) – Shikz

你似乎對你的動畫很長的延時（30秒..爲什麼它設置爲30時延遲的圖像只有6？甚至6是很長的......）其他問題..你似乎沒有任何關鍵幀存在，否則他們不會發布。如果要逐漸淡出圖像，可以通過關鍵幀中的移動設置較低的不透明度。

總是一個好主意，給你的圖像類，如果不是一個ID，特別是當你有一組相關的圖像。我添加了一個imageAnimation類，以便您可以輕鬆地在代碼中看到包含哪些圖像;如果代碼中的動畫附近有其他圖像，則在開發期間稍後可能會更難看到。

我還插入了關鍵幀和div的一些代碼（沒有發佈，只是圖像）。

希望這有助於

img.imageAnimation { 
 
display:inline!important; 
 
position:relative; 
 
width: 200px; 
 
height: 120px; 
 
top: 0px; 
 
left: 0px; 
 
background-color: transparent; 
 
opacity:.8; 
 
z-index:1; 
 
-webkit-backface-visibility: hidden; 
 
-webkit-animation: imageAnimation 6s linear 2s infinite alternate; 
 
-moz-animation: imageAnimation 6s linear infinite 6s; 
 
-o-animation: imageAnimation 6s linear infinite 6s; 
 
-ms-animation: imageAnimation 6s linear infinite 6s; 
 
animation: imageAnimation 6s linear infinite 6s ; 
 
} 
 

 
@-webkit-keyframes imageAnimation { 
 
    0% {left:600px; top:0px; opacity:.8;} 
 
    25% {left:400px; top:0px; opacity:.6;} 
 
    50% {left:200px; top:0px; opacity:.4;} 
 
    75% {left:0px; top:0px; opacity:.2;} 
 
    100% {left:-200px; top:0px; opacity:0;} 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes imageAnimation { 
 
    0% {left:600px; top:0px; opacity:.8;} 
 
    25% {left:400px; top:0px; opacity:.6;} 
 
    50% {left:200px; top:0px; opacity:.4;} 
 
    75% {left:0px; top:0px; opacity:.2;} 
 
    100% {left:-200px; top:0px; opacity:0;} 
 
} 
 

 
#crossfade { 
 
    width: 610px; 
 
    height: 150px; 
 
    background-color: transparent; 
 
    position: absolute; 
 
    overflow-x:hidden!important; 
 
}

<div id="crossfade"> 
 

 
    <img class="imageAnimation" src="http://www.rachelgallen.com/images/yellowflowers.jpg" alt="Image 1"> 
 
    <img class="imageAnimation" src="http://www.rachelgallen.com/images/mountains.jpg" alt="Image 2"> 
 
    <img class="imageAnimation" src="http://www.rachelgallen.com/images/purpleflowers.jpg" alt="Image 3"> 
 
</div>

來源

2017-05-14 19:31:51

小提琴https://jsfiddle.net/RachGal/w0Lzu0mg/ –

如果將不透明度設置爲0並將其保持爲0，則不會看到任何東西！ –

感謝您的評論。我知道imageanimation是我希望顯示圖像的時間長度。但也許我錯了？我會嘗試使用你的代碼，看看它是否有效。乾杯。 – Shikz

CSS圖像交叉淡化不能正常工作

回答

相關問題