Почему не работает animation в -moz-?

Question

[Максим]

Не работает в ;
-moz-
apple-webkit-

codepen.io/Geyan/pen/ObRWoE?editors=1100
Этот вопрос на ruSO

Почему?

Answer 1

[Алекс Глебов]

1) свойство без префикса пишется в конце, чтобы когда браузеры начнут его поддерживать, оно перекрывало те которые с префиксом.

-webkit-animation: dinamic 1s infinite steps(4);
-moz-animation: dinamic 1s infinite steps(4);
animation: dinamic 1s infinite steps(4);

2) последняя версия браузера mozilla которая поддерживала -moz-animation вышла в 2012году. её уже никто не использует. Уже давно мозилла поддерживает animation без префикса.
caniuse.com/#search=animation
используй только -webkit-animation для старых сафари
apple-webkit- такого вообще не существует

Comments

[Максим]

а вы смогли запустить это в мозилке ?

[Максим]

и к пре великому сожалению не заработало - почему то

[Максим]

на ubuntu-webkit- и на winows-webkit- работает , от туда у меня такая фраза что на apple-webkit- не работает

Answer 2

[Дмитрий Клусевич]

backgroun-image свойство которое не анимируется через keyframes. Вроде только webkit, это может. Но есть другие способы добиться такого эффекта.

Comments

[Максим]

там вроде просто смена background -

[Максим]

htmlbook.ru/blog/animaciya-fona как в прочем не работает и у гуру css3 его пример : htmlbook.ru/blog/animaciya-fona

[Дмитрий Клусевич]

Backround это составное свойство, просто синтаксический сахар, интерпретатор разбивает его на составляющие, и не все из них могут работать с keyframes. И браузерные движки не всегда едины в реализации фич.

[Дмитрий Клусевич]

У гуру не меняется url. Только позиция.

[Максим]

Дмитрий Клусевич: так спрей не получится , если просто сдвигать фон, я вообще это делал для премера - вопрос был сдесь - а тут проверил на яблоке и лисе , и офигел - по ходу это не решается

[Дмитрий Клусевич]

Трудна жизнь разработчика, не все всегда как хочется, приходится есть на велосипеде с квадратными колесами и без руля.

[Дмитрий Клусевич]

ездить, а не есть)

Answer 3

[Kovalsky]

Пам парам пам, классическая анимация на CSS делается спрайтами с использованием step, как-то так.