为什么-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规则.