css - 为什么 -moz-animation 不起作用？

Question

以下 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);
      }
}

Answer 1

您的动画在 Firefox 中不起作用，因为您使用的是 @-webkit-keyframes，它仅适用于 Webkit 浏览器，即 Chrome 和 Safari。制作动画关键帧的(有点)跨浏览器方式是:

@keyframes animationName {
    /* animation rules */
}

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

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

Opera 和 Internet Explorer 目前不支持 @keyframes 规则。