动画在Firefox的第二次迭代中不起作用

Question

我正在制作一个带有一些动画的滑块，它在谷歌浏览器中运行，但在 Firefox 中，它一开始运行良好（第一次显示图像） 但是当它第二次开始显示图像时，我看不到动画

这里是jquery代码

var anim = function(index){
    return _start = setInterval(function(){
        $($slides).each(function(){
            $(this).removeClass("current");
        });
        $($pages).each(function(){
            $(this).removeClass("active");
        });
        if(index < $slides.length - 1)
            index++;
        else
            index = 0;
        current = index;
        $($slides[index]).addClass("current");
        $($pages[index]).addClass("active");
    },speed);
}

就像firefox记住了动画，它不再显示它了

这是 CSS 中的“当前”类

.current{display: block;}
.current .right-side img{
    animation:zoomin 5s;
    -moz-animation:zoomin 5s;
    -webkit-animation:zoomin 5s;
    -o-animation:zoomin 5s;
    -ms-animation:zoomin 5s;
}
.current .right-side img{
    animation:zoomin 5s;
    -webkit-animation:zoomin 5s;
    -moz-animation:zoomin 5s;
    -o-animation:zoomin 5s;
    -ms-animation:zoomin 5s;
}
.current .left-side > *:not(button) {
    animation:fadeInDown 2.5s;
    -moz-animation:fadeInDown 2.5s;
    -webkit-animation:fadeInDown 2.5s;
    -o-animation:fadeInDown 2.5s;
    -ms-animation:fadeInDown 2.5s;
}
.current .left-side > button{
    animation : fadeIn 2.5s;
    -webkit-animation : fadeIn 2.5s;
    -moz-animation : fadeIn 2.5s;
    -o-animation : fadeIn 2.5s;
    -ms-animation : fadeIn 2.5s;
}

Answer 1

在线查看我认为您需要一个迭代计数器。喜欢这个。

animation-iteration-count: infinite;

animation-duration: 2.5s;