Почему не работает animation в IE и FF?

Question

[vohaha]

Анимация- смена фона. Работает в хроме и опере, в IE и FF нет.
codepen.io/anon/pen/xkvby

Answer 1

[Евгений Петров]

Потому что и не должна работать — в описании background-image ясно написано Animatable: no. И в списке Animatable properties такого свойства просто нет.

Я понимаю — спецификации нынче никому не нужны, однако именно с них нужно начинать поиск проблемы.

Сделайте несколько слоёв (для 3-х изображений хватит самого элемента и 2-х псевдоэлементов), задайте им фон и управляйте opacity для них.

Comments

[vohaha]

да, спасибо, первой частью ответа вы уже натолкнули на эту мысль. Но может я чего то не понимаю, но все же в chrome и opera работает...

Answer 2

[Виталий Киренков]

Во-первых - пример и в фоксе не работает.
Во-вторых - background-size - значения пишутся подряд, а не через запятую. Возможно в этом проблема.

Comments

[vohaha]

Ну да, я же и написал FF(FireFox). И нет, запятые не при чем. Без них так же не работает.

[Виталий Киренков]

@vohaha я просто с миксинами сасс-а не знаком. Второе могу предположить, что у вас не ставятся на анимации префиксы.
Тут можно подглядеть - css-tricks.com/snippets/css/keyframe-animation-syntax