setinterval에 CSS3 crossfade simialr

Question

JS setinterval/settimeout과 비슷한 효과를 얻으려고하지만 CSS3를 사용하려고합니다. 지금까지 원하는 효과를 얻었으나 호버 만 사용하십시오. 마우스를 움직일 필요없이 애니메이션이 매 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

#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

Online demo

당신의 필요에 맞게 animation-duration을 조정합니다.

편집 :

몇 초 동안 투명이이 같은 것을 사용

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