css - setinterval に似た CSS3 クロスフェード

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

そしてフィドル：http://jsfiddle.net/qEwPb/