CSS3淡入淡出各種圖像

Question

我有4張圖片，我想用一個容器內的CSS交叉衰減：

<div id="frame"> 
    <img class="img1" src="img1.jpg"> 
    <img class="img2" src="img2.jpg"> 
    <img class="img3" src="img3.jpg"> 
    <img class="img4" src="img4.jpg"> 
</div> 

我知道，淡入淡出的圖像由CSS動畫，但我一直沒能找到CSS來使它工作。任何幫助將不勝感激，謝謝！

Answer 1

這裏是一個Fiddle

這是與2頁的圖片更容易，但你寫了4，你需要做到這一點的CSS：

@-webkit-keyframes cf4FadeInOut { 
0% { 
    opacity:1; 
} 
17% { 
    opacity:1; 
} 
25% { 
    opacity:0; 
} 
92% { 
    opacity:0; 
} 
100% { 
    opacity:1; 
} 
} 

@-moz-keyframes cf4FadeInOut { 
0% { 
    opacity:1; 
} 
17% { 
    opacity:1; 
} 
25% { 
    opacity:0; 
} 
92% { 
    opacity:0; 
} 
100% { 
    opacity:1; 
} 
} 

@-o-keyframes cf4FadeInOut { 
0% { 
    opacity:1; 
} 
17% { 
    opacity:1; 
} 
25% { 
    opacity:0; 
} 
92% { 
    opacity:0; 
} 
100% { 
    opacity:1; 
} 
} 

@keyframes cf4FadeInOut { 
0% { 
    opacity:1; 
} 
17% { 
    opacity:1; 
} 
25% { 
    opacity:0; 
} 
92% { 
    opacity:0; 
} 
100% { 
    opacity:1; 
} 
} 

#Crossfading { 
    position:relative; 
    height:281px; 
    width:450px; 
    margin:0 auto; 
} 
#Crossfading img { 
    position:absolute; 
    left:0; 
} 

#Crossfading img { 
    -webkit-animation-name: cf4FadeInOut; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 8s; 

    -moz-animation-name: cf4FadeInOut; 
    -moz-animation-timing-function: ease-in-out; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-duration: 8s; 

    -o-animation-name: cf4FadeInOut; 
    -o-animation-timing-function: ease-in-out; 
    -o-animation-iteration-count: infinite; 
    -o-animation-duration: 8s; 

    animation-name: cf4FadeInOut; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 8s; 
} 
#Crossfading img:nth-of-type(1) { 
    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -o-animation-delay: 6s; 
    animation-delay: 6s; 
} 
#Crossfading img:nth-of-type(2) { 
    -webkit-animation-delay: 4s; 
    -moz-animation-delay: 4s; 
    -o-animation-delay: 4s; 
    animation-delay: 4s; 
} 
#Crossfading img:nth-of-type(3) { 
    -webkit-animation-delay: 2s; 
    -moz-animation-delay: 2s; 
    -o-animation-delay: 2s; 
    animation-delay: 2s; 
} 
#Crossfading img:nth-of-type(4) { 
    -webkit-animation-delay: 0; 
    -moz-animation-delay: 0; 
    -o-animation-delay: 0; 
    animation-delay: 0; 
}