4

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

2 回答 2

9

您的动画在 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 规则。

于 2011-09-30T20:42:23.663 回答
0

天际线是正确的。Firefox 不支持这一点，因此如果它们在没有 webkit 的情况下存在，您将需要额外的代码来获得相同或相似的效果。

此外，这里有一些额外的信息可能会帮助您编写代码，或者如果无法选择添加其他代码，则可以帮助您决定从这一点开始使用代码的位置（我最终改变了我的编码方式，以免被淹没代码）：

http://caniuse.com/#

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

于 2011-09-30T21:07:05.973 回答