动画在火狐浏览器的第二次迭代中不起作用

Question

我正在制作一个带有一些动画的滑块，它在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'类

.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;