javascript - 我的 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 fiddle : 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);
});