Question

我有一些SASS规则在Chrome上完美运行，我也试图让它们在Firefox上工作。

我正在Firefox和Windows 7上的最新Ubuntu 12.04版本上测试代码，但它无效：

30.0 Mozilla Firefox for Ubuntu规范 - 1.0
30.0

以下是SASS类正在处理Chrome并添加了Firefox规则的类。谁能说我错过了什么：

.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中运行的原因： 您在应该写了transition的几个地方写了transform。

示例：

/* 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)

我认为你错过了注意到这一点，当文本编辑器在输入转换时提示单词转换时 - 发生在我身上很多：）

CSS3动画在Firefox中不起作用

1 个答案:

DEMO