Animation not working in firefox?

Question

css

@keyframes card1_anim {
    25% {
        background-image: url(../img/12.jpg);
    }
    50% {
        background-image: url(../img/13.jpg);
    }
    75% {
        background-image: url(../img/14.jpg);
    }
    100% {
        background-image: url(../img/15.jpg);
    }
}

.card1_anim {
 
    -webkit-transition: all ease;
    -o-transition: all ease;
    transition: all ease;
    
            -webkit-animation-name: card1_anim;
    -o-animation-name: card1_anim;
    animation-name: card1_anim;
    -webkit-animation-duration: 5s;
    -o-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

Starts animation on hover:

$(window).scroll(function () {
            if ($(this).scrollTop() > 550) {
                $('.eco_logo').addClass('bl2_anim');
            } else {
                $('.eco_logo').removeClass('bl2_anim');
            }
        })

Answer 1

You don't have the required prefixes. Run your gulp css file and everything will work

Answer 2

Try adding -moz- prefix
-moz-animation: ... ;

Answer 3

And is it supposed to work at all?
background-image is not an animated property)

Answer 4

You have a class that starts the animation called card1_anim, and when you scroll, add another class bl2_anim. Although write that on hover, first carefully understand the code

Answer 5

Sprites!