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规则。

Answer 2

天际线是正确的。 Firefox不支持此功能，因此如果没有webkit，您将需要额外的代码才能获得相同或类似的效果。

此外，这里还有一些其他信息可以帮助您使用代码或帮助您决定从代码的这一点开始，如果添加其他代码不是一个选项（我最终改变了代码保留的方式）被代码淹没了）：

http://caniuse.com/#

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

为什么-moz-animation不工作？

2 个答案: