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

Question

我正在制作一个带有一些动画的 slider ，它在 google chrome 中工作，但在 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;