過渡到另一個

Question

我目前使用此代碼：

#div { background-image: url('imageurl.com'), url('imageurl2.com'); position: absolute !important; right: 0; left: 0; height: 210px !important; display: table-cell !important; vertical-align: middle !important;} 

@keyframes FadeInOut { 
0% { 
    opacity:1; 
} 
45% { 
opacity:1; 
} 
55% { 
opacity:0; 
} 
100% { 
opacity:0; 
} 
} 

#div img.top { 
animation-name: FadeInOut; 
animation-timing-function: ease-in-out; 
animation-iteration-count: infinite; 
animation-duration: 10s; 
animation-direction: alternate; 
} 

實際上，我想實現這個網站從演示3代碼： http://css3.bradshawenterprises.com/cfimg/

在該演示中，在一個div中有兩個圖像，代碼只是在定時器中淡入第一個圖像。我嘗試着使用上面的代碼來實現這個功能，但是它會淡入淡出。有誰知道我錯過了什麼？

Answer 1

如果通過背景圖片可以使用僞元素需要實現：

#cf2 { 
 
    position:relative; 
 
    height:281px; 
 
    width:450px; 
 
    margin:0 auto; 
 
    background-image: url("http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg"); 
 
} 
 

 
#cf2::after{ 
 
    content: ' '; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
    background-image: url("http://css3.bradshawenterprises.com/images/Turtle.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 0; 
 
    background-size: cover; 
 
} 
 

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

 
#cf2::after { 
 
animation-name: cf3FadeInOut; 
 
animation-timing-function: ease-in-out; 
 
animation-iteration-count: infinite; 
 
animation-duration: 10s; 
 
animation-direction: alternate; 
 
}

<div id="cf2"> 
 
</div>

Answer 2

這裏的實施，他們使用不同的<img>標籤顯示/隱藏圖片： 它們是絕對定位爲一個在其他的，一個是在頂部只是顯示和動畫隱藏（改變其不透明度） - 所以當頂一個具有透明度的底部有一個剛變爲可見= 0

@keyframes cf3FadeInOut { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    45% { 
 
    opacity: 1; 
 
    } 
 
    55% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 
#cf3 img.top { 
 
    animation-name: cf3FadeInOut; 
 
    animation-timing-function: ease-in-out; 
 
    animation-iteration-count: infinite; 
 
    animation-duration: 10s; 
 
    animation-direction: alternate; 
 
} 
 
#cf3 img { 
 
    position: absolute; 
 
    left: 0; 
 
} 
 
#cf3 { 
 
    position: relative; 
 
    height: 281px; 
 
    width: 450px; 
 
    margin: 0 auto; 
 
}

<div id="cf3" class="shadow"> 
 
    <img class="bottom" src="http://css3.bradshawenterprises.com/images/Turtle.jpg"> 
 
    <img class="top" src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg"> 
 
</div>