类似于 setinterval 的 CSS3 crossfade

Question

我正在尝试实现与 JS setinterval/settimeout 类似的效果，但使用的是 CSS3。到目前为止，我已经达到了预期的效果，但仅限于 :hover。我怎样才能让动画每 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;
}

还有一把 fiddle :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;
    }
}