为什么-moz-animation不工作？ [英] Why isn't -moz-animation working?

问题描述

以下CSS在Webkit中工作正常。没有在Opera检查，但我知道它不工作在Firefox。任何人都可以告诉我为什么？

The following CSS works fine in Webkit. Haven't checked it in Opera, but I know it's not working in Firefox. Can anybody tell me why?

正确的类肯定是​​应用于我的HTML（用Firebug检查它，我看到 -moz -animation：500ms ease 0s normal forward 1 arrowRotateDot 属性 .arrow ）。

The correct classes are definitely getting applied to my HTML (inspected it with Firebug, and I do see the -moz-animation: 500ms ease 0s normal forwards 1 arrowRotateDot property on .arrow).

这也不工作在IE9，虽然我最初有 -ms-animation：... 和 -ms-transform：.. 。。我认为它应该在IE9中工作，但是当它没有我只是假设IE不支持这些。但是，现在，它不工作在Firefox，或许还有其他事情正在发生。

This also doesn't work in IE9, although I did originally have -ms-animation:... and -ms-transform:.... I thought it was supposed to work in IE9, but when it didn't I just assumed that IE didn't support these yet. However, now that it's not working in Firefox, maybe something else is going on.

.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);
      }
}

推荐答案

动画在Firefox中不起作用，因为您使用的是@ - webkit 键框架，它仅适用于Webkit浏览器，即Chrome和Safari。 （有些）跨浏览器执行动画关键帧的方法是：

Your animations are not working in Firefox because you are using @-webkit-keyframes, which only applies to Webkit browsers, i.e. Chrome and Safari. The (somewhat) cross-browser way to do animation keyframes is:

@keyframes animationName {
    /* animation rules */
}

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

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

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

Opera and Internet Explorer do not currently support the @keyframes rule.

这篇关于为什么-moz-animation不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！