javascript - 使用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 :

animationiteration

The animationend event is fired when an iteration of an animation ends. This event does not occur for animations with an animation-iteration-count of one.

MDN Documentation

请注意，这些事件有其在浏览器上的前缀:

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

You can also add a jQuery delay if you want to wait a X number if MS before doing something.

The final code look like this :

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