使用jQuery setInterval同步CSS关键帧动画

Question

我遇到了一个问题。 我有一个7000毫秒的setInterval函数，该函数做了一件小事，并且将css3关键帧动画设置为7s。 最初，它可以完美地同步运行，但是经过几个循环/动画时间后，它们开始越来越不同步。 所以我想知道setInterval函数中设置的7000是否与css3关键帧动画中设置的7s相同，或者它们是否不同，因此随着时间的推移会导致这种错误修复？

这是一个jsFidle示例（由于某些原因，有时其行为会有所不同）

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

Answer 1

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

• animationiteration
• animationstart
• animationend

在您的情况下，由于您有无限次迭代，因此您正在寻找animationiteration ：

animationiteration

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

MDN文档

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

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

如果您想在做某事之前等待MS的X数，则还可以添加jQuery延迟 。

最终代码如下所示：

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

小提琴