使用jQuery同步css關鍵幀動畫setInterval

我遇到了一個問題。我有一個7000毫秒的setInterval函數可以做一件小事，並且還有一個設置爲7s的css3關鍵幀動畫。最初，它完全同步運行，但是經過幾次循環/動畫時間後，它們開始越來越不同步。所以我想知道是在setInterval函數中設置了7000是否與在css3關鍵幀動畫中設置的7s相同，或者它們有所不同，因此會隨着時間的推移導致這種失效？使用jQuery同步css關鍵幀動畫setInterval

下面是一個例子jsFidle（由於某種原因，它具有不同的行爲有時）

jQuery的動畫在使用setInterval：

function opacity() { 
     $('#jQuery').animate({opacity: 0}, 100); 
     $('#jQuery').animate({opacity: 1}, 100); 
    } 
    setInterval(opacity, 1000);

CSS關鍵幀動畫：

@-webkit-keyframes test { 
    0%, 100% { opacity: 0; } 
    10%, 90% { opacity: 1; } 
} 
@-moz-keyframes test { 
    0%, 100% { opacity: 0; } 
    10%, 90% { opacity: 1; } 
} 
@-o-keyframes test { 
    0%, 100% { opacity: 0; } 
    10%, 90% { opacity: 1; } 
} 
@keyframes test { 
    0%, 100% { opacity: 0; } 
    10%, 90% { opacity: 1; } 
}

來源

2014-06-25 Ilja

對於這樣的事情，它是更好的使用像['animationstart'（HTTPS事件：//developer.mozilla。組織/ EN-US /文檔/網絡/活動/ animationstart）。 –

@ Karl-AndréGagnon您能否深入瞭解一下它如何能夠讓我的問題受益？你提供的鏈接是有用的，但我真的沒有得到它。 – Ilja

看看這個：http://jsfiddle.net/48kx9/1/ –

JavaScript可以聽CSS動畫有不同的事件：

animationiteration
animationstart
animationend

在你的情況，因爲你有無限的迭代，你正在尋找animationiteration：

animationiteration

的animationend事件動畫迭代結束時觸發。對於動畫迭代次數爲1的動畫，此事件不會發生。

MDN Documentation

注意，這些事件有其瀏覽器的前綴：

 
W3C standard   | Firefox    | webkit      | Opera     | IE10 
animationstart  | animationstart  | webkitAnimationStart  | oanimationstart  | MSAnimationStart 
animationiteration | animationiteration | webkitAnimationIteration | oanimationiteration | MSAnimationIteration 
animationend   | animationend   | webkitAnimationEnd   | oanimationend   | MSAnimationEnd

您還可以添加一個jQuery delay如果你想要做某件事之前要等待，如果MS一個X號。

最後的代碼如下所示：

$('#css').on('animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration', function(){ 
     $('#jQuery').delay(250)//If you need any kind of delay 
     .animate({opacity: 0}, 100) 
     .animate({opacity: 1}, 100); 
})

Fiddle

來源

2014-06-25 14:57:30

使用jQuery同步css關鍵幀動畫setInterval

回答

animationiteration

相關問題