我的css动画和JQuery没有同步

Question

我正在构建一个简单的闪烁div，它每3秒闪烁一次：

.timer { opacity: 1; animation: blink 3s alternate infinite; }

@keyframes blink { to {opacity: .25;} }

它的文本内容也每3秒更新一次，从50倒数到0：

var number = 50;

window.setInterval(function countdown(){ $('.timer').text(number--); }, 3000);

然而由于某些原因，我的动画和JQ慢慢变得不同步，你会在一些动画完成后注意到它。我想知道如何保证他们能够及时保持联系。

JS小提琴： https://jsfiddle.net/rourkemclaren/61ry4s1j/3/

提前致谢。

Answer 1

该问题与CSS alternate标志有关。如果删除它，效果将变为more streamlined。

请注意，您也可以listen to the CSS animation events using JavaScript而不是使用setInterval：

$('.timer').on('animationiteration', function() {
    $(this).text(--number);
});