html5：我如何觸發或停止css3循環動畫？

我有CSS3動畫作出這樣的幻燈片：html5：我如何觸發或停止css3循環動畫？

@-keyframes animBanner 
{ 
0% {top: 0px;} 
18% {top: 0px;} 
20% {top: -60px;} 
38% {top: -60px;} 
40% {top: -120px;} 
58% {top: -120px;} 
60% {top: -180px;} 
78% {top: -180px;} 
80% {top: -240px;} 
98% {top: -240px;} 
100% {top: 0px;} 
}

我想控件添加到它，所以你可以去你想要的照片。

我可以觸發轉換事件與一個簡單的JavaScript這樣的：

，但它不與動畫作品。是否有可能使這個工作，或者我應該使用jQuery的動畫？

來源

2012-11-07 cibermesias

通常的做法是有一個類爲該動畫和添加/移除元素的類你想要動畫。 – Shmiddty

他說什麼。另外，使用setTimeout去除類可能會更容易，例如，如果您知道動畫是2s，那麼在2.2s之後移除該類或其他類。爲更準確的刪除請參閱：http://stackoverflow.com/questions/2794148/css3-transition-events –

請參閱：http://jsfiddle.net/rr6wf/ – Shmiddty

Shmiddty是對的。

我改變了使用此代碼的類：

//Stop animation 
var ad = document.getElementById('animBannerId'); 
ad.className="paused"; 
//Move the slide to the desired pic 
anuncio.style.top = '160px'; 
//Etc.

而且我的CSS有過渡這段代碼：

.paused 
{ 
position: relative; 
transition:top 1s; 
-o-transition:top 1s; 
-webkit-transition:top 1s; 
-moz-transition:top 1s; 
}

你，夥計們，是偉大的。非常感謝你。

順便說一句，我還沒有添加代碼爲重啓動畫，但它可以做到使定時器

來源

2012-11-09 18:53:21 cibermesias

html5：我如何觸發或停止css3循環動畫？

回答

相關問題