Нужна помощь с анимацией ключевых кадров css3 в Moz (firefox 4)

Question

Теперь, когда вышел Firefox 4, я хочу получить некоторые из моих сайтов, которые имеют Chrome-анимацию и работают в Firefox. У меня есть все простые анимации, работающие в Firefox (вращение, движение и т. Д.), Но я не знаю, возможно ли сделать анимацию по ключевым кадрам, как это делается в Chrome (WebKit)?

Пример анимации Chrome ниже

@-webkit-keyframes "sway" {
0% { -webkit-transform: rotate(0deg);}
 25% {-webkit-transform: rotate(-2deg); }
 50% {-webkit-transform: rotate(2deg); }
 75% {-webkit-transform: rotate(-2deg); }
 100% { -webkit-transform: rotate(2deg); }}

Я оживляю это с помощью "-webkit-animation-name:" sway "". Простое изменение всех префиксов на moz не помогает. Любая информация была бы отличной.

Большое спасибо

Ник

Answer 1

Firefox пока не поддерживает анимацию CSS, следуйте ошибка 435442 , чтобы отслеживать прогресс в разработке. Ошибка довольно активна, поэтому я думаю, они пытаются включить ее в следующий выпуск.

Answer 2

Как сказал Робертк, в Firefox пока нет анимации CSS, только переходы. Если ваша анимация представляет собой просто дрожащую рамку, как у вас в CSS, вы бы легко достигли ее, связав переходы с небольшим количеством JavaScript ...

Ваш css:

#yourdiv {
  -moz-transition: all 200ms ease;
}

Ваш Javascript:

//onload body
var element = document.getElementById("yourdiv");
element.style.MozTransform = "rotate(2deg)";
element.addEventListener("transitionend", function(){
    var rotate = (element.style.MozTransform == "rotate(2deg)") ? "rotate(-2deg)" : "rotate(2deg)";
    element.style.MozTransform = rotate;
}, false);

На самом деле я не тестировал его в Firefox, но вот рабочая версия для webkit:

http://jsfiddle.net/J6SMb/