Анимация не работает в firefox?

Question

[Денис]

@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;
}

Запускает анимацию при наведении:

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

Answer 1

[imdeveloper]

У вас нет нужных префиксов. Прогоните свой css файл gulp и все буде работать

Comments

[Денис]

какие нужные? подскажите пожалуйста

[imdeveloper]

Денис: Я и сам толком не знаю, это знает только GULP:-) если через него прогнать css файл, то все будет работать

Answer 2

[HamSter]

Попробуйте добавить -moz- префикс
-moz-animation: ... ;

Answer 3

[Алексей Струков]

А оно вообще должно работать то?
Background-image не анимируемое свойство)

Comments

[Денис]

а какую можно придумать альтернативу?

[Алексей Струков]

Денис: можно загрузить одну длинную картинку, слепленную в редакторе из тех 4 и менять потом в анимации позицию картинки. В общем почитайте про спрайты и как с ними работать. Но это не очень хороший способ на самом деле ибо картинки я так понял будут большие по размеру и может потребоваться много времени на загрузку и оперативной памяти чтобы с ними работать.

Answer 4

[stasov1]

У вас класс который запускает анимация называется card1_anim, а при скроле добавляете другой класс bl2_anim. Хотя пишите что при наведении, вначале внимательно в коде разберитесь

Answer 5

[Kovalsky]

Спрайты!