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; 
}