我的css动画和JQuery没有同步

My css animation and JQuery are not syncing up

本文关键字：同步 JQuery css 动画 我的      更新时间：2023-09-26

我正在构建一个简单的闪烁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/

提前谢谢。

该问题与CSS alternate标志有关。如果去掉它，效果会变得更加流畅。

请注意，您也可以使用JavaScript而不是使用setInterval:来侦听CSS动画事件

$('.timer').on('animationiteration', function() {
    $(this).text(--number);
});
相关文章：