CSS3动画无法在Firefox中使用

Question

我有一些可以在Chrome上正常运行的SASS规则，而且我也在尝试使其在Firefox也可以正常工作。

我正在Windows 7和Ubuntu 12.04上的最新Firefox版本上测试代码，但无法正常工作：

• 适用于Ubuntu的30.0 Mozilla Firefox规范-1.0
• 30.0

这是在Chrome上添加了Firefox规则的SASS类。 谁能说我想念的东西：

.rs-wrapper
    -webkit-perspective: 1000px
    -moz-perspective: 1000px
    perspective: 1000px

.rs-card, .rs-cover, .rs-transition
  -webkit-transform-style: preserve-3d
  -moz-transform-style: preserve-3d
  transform-style: preserve-3d

rs-flip01
  .rs-front, .rs-back
    -webkit-backface-visibility: hidden
    -moz-backface-visibility: hidden
    backface-visibility: hidden
  .rs-back
    -webkit-transform: rotate3d(1, 0, 0, -180deg)
    -moz-transition: rotate3d(1, 0, 0, -180deg)
    transition: rotate3d(1, 0, 0, -180deg)
  &.rs-show .rs-card
    -webkit-animation: rs-flip01 1s ease-in-out forwards
    -moz-animation: rs-flip01 1s ease-in-out forwards
    animation: rs-flip01 1s ease-in-out forwards

@-webkit-keyframes rs-flip01
  0%
    -webkit-transform: rotate3d(1, 0, 0, 0deg)
  100%
    -webkit-transform: rotate3d(1, 0, 0, -180deg)

@-moz-keyframes rs-flip01
  0%
    -moz-transition: rotate3d(1, 0, 0, 0deg)
  100%
    -moz-transition: rotate3d(1, 0, 0, -180deg)

@keyframes rs-flip01
  0%
    transition: rotate3d(1, 0, 0, 0deg)
  100%
    transition: rotate3d(1, 0, 0, -180deg)

这些是使动画在Chrome正常运行的所有样式。 我一定错过了某件事或做错了。

以下行在两种浏览器上均返回true ：

Modernizr.csstransforms3d

另外，我可以说的是，我在动画start和end事件上绑定的功能在Firefox上未触发。

Answer 1

DEMO

我不知道您的标记是什么，但是我已经创建了这个演示，它也可以在Firefox上运行。

原因是您的SCSS在Firefox中不起作用：您在应该编写transform几个地方编写了transition 。

例：

/* WRONG */
@-moz-keyframes rs-flip01
  0%
    -moz-transition: rotate3d(1, 0, 0, 0deg)
  100%
    -moz-transition: rotate3d(1, 0, 0, -180deg)

/* CORRECT */
@-moz-keyframes rs-flip01
  0%
    -moz-transform: rotate3d(1, 0, 0, 0deg)
  100%
    -moz-transform: rotate3d(1, 0, 0, -180deg)

当文本编辑器在输入transform时建议单词transition时，我想您会错过这一点-我经常发生:)