Почему -moz-анимация не работает? - PullRequest
Новая
       31

Почему -moz-анимация не работает?

4 голосов
/ 30 сентября 2011

Следующий CSS отлично работает в Webkit. Я не проверял это в Opera, но я знаю, что он не работает в Firefox. Кто-нибудь может сказать мне, почему?

Правильные классы определенно применяются к моему HTML (проверил его с помощью Firebug, и я вижу свойство -moz-animation: 500ms ease 0s normal forwards 1 arrowRotateDot в .arrow).

Это также не работает в IE9, хотя изначально у меня были -ms-animation:... и -ms-transform:.... Я думал, что он должен работать в IE9, но когда это не так, я просто предположил, что IE еще не поддерживает их. Однако теперь, когда он не работает в Firefox, возможно, происходит что-то еще. 

.page.updatesPodcasts > .mainContent > .content .contentUpdates .disc.dot .dvd .arrow {
  -webkit-animation: arrowRotateDot 500ms forwards;
  -moz-animation: arrowRotateDot 500ms forwards;
  -o-animation: arrowRotateDot 500ms forwards;
  animation: arrowRotateDot 500ms forwards;
}
.page.updatesPodcasts > .mainContent > .content .contentUpdates .disc.f2 .dvd .arrow {
  -webkit-animation: arrowRotateF2 500ms forwards;
  -moz-animation: arrowRotateF2 500ms forwards;
  -o-animation: arrowRotateF2 500ms forwards;
  animation: arrowRotateF2 500ms forwards;
}

@-webkit-keyframes arrowRotateDot {
  100%  {
      left:-18px; top:182px;
      -moz-transform: scale(1) rotate(-30deg);
      -webkit-transform: scale(1) rotate(-30deg);
      -o-transform: scale(1) rotate(-30deg);
      transform: scale(1) rotate(-30deg);
      }
}
@-webkit-keyframes arrowRotateF2 {
  0%  {
      left:-18px; top:182px;
      -moz-transform: scale(1) rotate(-30deg);
      -webkit-transform: scale(1) rotate(-30deg);
      -o-transform: scale(1) rotate(-30deg);
      transform: scale(1) rotate(-30deg);
      }
  100%  {
      left:115px; top:257px;
      -moz-transform: scale(1) rotate(-90deg);
      -webkit-transform: scale(1) rotate(-90deg);
      -o-transform: scale(1) rotate(-90deg);
      transform: scale(1) rotate(-90deg);
      }
}

Ответы [ 2 ]

9 голосов
/ 01 октября 2011

Ваша анимация не работает в Firefox, потому что вы используете @ - webkit -keyframes, который применяется только к браузерам Webkit, т.е.(Несколько) кросс-браузерный способ создания ключевых кадров анимации: 

@keyframes animationName {
    /* animation rules */
}

@-moz-keyframes animationName {
    /* -moz-animation rules */
}

@-webkit-keyframes animationName {
    /* -webkit-animation rules */
}

Opera и Internet Explorer в настоящее время не поддерживают правило @keyframes.

0 голосов
/ 01 октября 2011

Скайлайн правильный.Firefox не поддерживает это, поэтому вам понадобится дополнительный код для получения таких же или похожих эффектов, если они существуют без webkit.

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

http://caniuse.com/#

http://www.quirksmode.org/webkit.html

...