CSS3交叉衰减与设置间隔相似

我试图实现与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>

---

还有一把小提琴：

引自评论：

您可以使用CSS3

#交叉衰减img{
位置：绝对位置；
左：0；
}
#交叉衰减img.top{
-webkit动画名称：pulse；
-webkit动画迭代计数：无限；
-webkit动画计时功能：轻松输入输出；
-webkit动画持续时间：1s；
-webkit动画方向：交替；
动画名称：脉冲；
动画迭代次数：无限；
动画计时功能：轻松进出；
动画持续时间：1s；
动画方向：交替；
}
@-webkit关键帧脉冲{
0% {
不透明度：1；
}
100% {
不透明度：0；
}
}
@关键帧脉冲{
0% {
不透明度：1；
}
100% {
不透明度：0；
}
}

调整

动画持续时间

以满足您的需要

编辑：

如果您想在透明状态下停留几秒钟，请使用以下方法：

img.top{
动画持续时间：5s；
}
@关键帧脉冲{
0% {
不透明度：1；
}
20% {
不透明度：0；
}
100% {
不透明度：0；
}
}

您可以使用。您介意详细说明一下吗？或者展示一个例子？：）这对我来说似乎是忽明忽暗：（对不起，这应该是我现在遇到的问题，在这把小提琴上演示了：动画只在第二张图像上停留一秒钟，然后再进行更改..有什么建议吗？@Myles你想在顶部和底部停留多长时间？现在你的小提琴使用5s进行交易，从顶部到底部（0%-20%）停留1s，在底部停留4s（20%-100%），然后返回。您可以根据需要调整动画持续时间和关键帧中的百分比。我已经对其进行了排序，谢谢：）最后使用了jQuery，因为我需要它在所有浏览器和平台上工作，包括旧版本的IE。

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