Javascript 使用jQuery setInterval同步css关键帧动画

我遇到了一个问题。我有一个7000毫秒的setInterval函数，它做了一件小事，还有一个css3关键帧动画设置为7秒。最初，它完全同步运行，但经过几次循环/动画时间后，它们开始越来越不同步。所以我想知道setInterval函数中的7000集是否与css3关键帧动画中的7s集相同，或者它们是否不同，从而导致随着时间的推移出现这种失真

下面是一个示例（由于某些原因，它有时表现不同）

带有setInterval的jQuery动画：

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

---

JavaScript可以侦听CSS动画，并具有不同的事件：

• 动画迭代

• animationstart

• animationend

在您的情况下，因为您有一个无限的迭代，所以您正在寻找

animationiteration

：

动画迭代 动画迭代结束时，将触发animationend事件。对于动画迭代计数为1的动画，不会发生此事件

请注意，这些事件的浏览器前缀为：

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

---

对于这类事情，最好使用像这样的事件。@Karl AndréGagnon您能不能更深入地讨论一下它对我问题中的情况有什么好处？你提供的链接很有用，但我没有真正理解。请查看：@Karl AndréGagnon我想我明白了，你想把它作为一个答案吗？

$('#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);
})