Question

我正在尝试使用CSS3来实现与JS setinterval / settimeout类似的效果。到目前为止，我已经达到了预期的效果，但仅限于：悬停。我怎样才能完成这项工作，以便动画每3-4秒运行一次，而不需要悬停？

考虑：

<div id="crossfade">
    <img class="bottom" src="http://www.boohoo.com/content/ebiz/boohoo/resources/images    /topbanners/Offer_Strip_GBP_v1.jpg" />
    <img class="top" src="http://www.boohoo.com/content/ebiz/boohoo/resources/images/topbanners/Offer_Strip_EUR_v1.jpg" />
</div>

和

#crossfade {
    position:relative;
    height:250px;
    width:400px;
}
#crossfade img {
    position:absolute;
    left:0;
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#crossfade img.top:hover {
    opacity:0;
}

小提琴：http://jsfiddle.net/qEwPb/

Answer 1

延伸评论：

您可以使用CSS3 animation

Online demo

#crossfade img {
    position:absolute;
    left:0;
}
#crossfade img.top {
    -webkit-animation-name:pulse;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-duration:1s;
    -webkit-animation-direction:alternate;

    animation-name:pulse;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
    animation-duration:1s;
    animation-direction:alternate;
}

@-webkit-keyframes pulse {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
@keyframes pulse {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

Browser compatibility

根据您的需要调整animation-duration。

编辑：

如果你想留在透明几秒钟，使用这样的东西：

img.top {
    animation-duration:5s;
}
@keyframes pulse {
    0% {
        opacity:1;
    }
    20% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

CSS3交叉淡入淡出类似于setinterval

1 个答案: