在循环中使用CSS在图像之间交叉淡入淡出 [英] Cross-Fade between images with CSS in loop

问题描述

我想在一个循环中的图片之间淡入（像这里的结果 - jsfiddle.net/5M2PD ），但纯粹通过 CSS ，no JavaScript 。我尝试使用关键帧，但我不成功。请帮忙。

I want to fade between images in a loop (like result here-jsfiddle.net/5M2PD) but purely through CSS, no JavaScript. I tried using key-frames but I wasn't successful. Please Help.

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

推荐答案

a基地，并使其无脚本工作。

I have taken your fiddle as a base, and made it work without script.

我需要为HTML设置ID

I needed to set an id to the HTML

<div class="fadein">
    <img id="f3" src="http://i.imgur.com/R7A9JXc.png">
    <img id="f2" src="http://i.imgur.com/D5yaJeW.png">
    <img id="f1" src="http://i.imgur.com/EUqZ1Er.png">
</div>

CSS是：

.fadein img {
    position:absolute;
    left:-65px;
    top:0;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 {
    background-color: lightblue;
}
#f2 {
    -webkit-animation-delay: -4s;
    background-color: yellow;
}
#f3 {
    -webkit-animation-delay: -2s;
    background-color: lightgreen;
}

我设置关键帧给aprox 1/3的时间可见，具有偏移转变。
然后我为每个图像设置不同的延迟，以便它们交替。
如果您需要完整的浏览器支持，您将需要更多的供应商前缀。我使用了-webkit-和裸资产，这样你就能得到想法。

I am setting the keyframes to give aprox 1/3 of the time visible, with apropiate transitions. Then I set different delays for every image, so that they alternate. If you want full browser support, you will need more vendor prefixes. I have used -webkit- and bare property so that you get the idea.

这篇关于在循环中使用CSS在图像之间交叉淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！