同步css关键帧动画与jQuery setInterval

Question

我遇到了一个问题。我有一个7000毫秒的setInterval函数，做一件小事，并与它一起css3关键帧动画设置为7s。一开始它是完全同步运行的，但经过几次循环/动画时间后，它们开始越来越不同步。所以我想知道的是7000设置在setInterval函数相同的7s设置在css3关键帧动画，或者他们是不同的，因此导致这种不对称随着时间的推移?

这里是一个示例jsFidle(由于某些原因，它的行为有时不同)

jQuery animation with 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; }
}

Answer 1

JavaScript可以监听CSS动画并拥有不同的事件:

• animationiteration
• animationstart
• animationend

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

<标题> animationiteration h1> 画迭代结束时触发animationend事件。此事件不会发生在animation-iteration-count为1的动画中。

MDN文档

请注意，这些事件都有自己的浏览器前缀:

<>之前W3C标准| Firefox | webkit | Opera | IE10animationstart | webkitAnimationStart | oanimationstart | MSAnimationStartanimationiteration | webkitAnimationIteration | MSAnimationIterationanimationend | animationend | webkitAnimationEnd | oanimationend | MSAnimationEnd之前

你也可以添加一个jQuery延迟，如果你想等待一个X数如果MS之前做某事。

最后的代码是这样的:

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

小提琴