D
D
Denis2016-07-06 16:21:04
css
Denis, 2016-07-06 16:21:04

Animation not working in firefox?

@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 the question

In order to leave comments, you need to log in

5 answer(s)
I
imdeveloper, 2016-07-06
@link_web

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

H
HamSter, 2016-07-06
@HamSter007

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

A
Alexey Strukov, 2016-07-07
@pm_wanderer

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

S
stasov1, 2016-07-07
@stasov1

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

K
Kovalsky, 2016-11-16
@lazalu68

Sprites!

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question