CSS3动画在Firefox中无法正常工作。

Question

这个在Google Chrome里可以正常工作，但在Firefox中却不行。我该如何解决？

@keyframes rotate {
        0% {
                -webkit-transform: rotate3d(1,1,1,0deg) translate3d(100px,100px,100px);
                -moz-transform: rotate3d(1,1,1,0deg) translate3d(100px,100px,100px);
                -o-transform: rotate3d(1,1,1,0deg) translate3d(100px,100px,100px);
                -ms-transform: rotate3d(1,1,1,0deg) translate3d(100px,100px,100px);
                transform: rotate3d(1,1,1,0deg) translate3d(100px,100px,100px);
        }

        100% {
                -webkit-transform: rotate3d(1,1,1,360deg) translate3d(100px,100px,100px);
                -moz-transform: rotate3d(1,1,1,360deg) translate3d(100px,100px,100px);
                -o-transform: rotate3d(1,1,1,360deg) translate3d(100px,100px,100px);
                -ms-transform: rotate3d(1,1,1,360deg) translate3d(100px,100px,100px);
                transform: rotate3d(1,1,1,360deg) translate3d(100px,100px,100px);
        }
}

http://jsfiddle.net/vahidseo/qYJHm/

- vahidseo

Answer 1

正如您可以在这里看到的，这是Firefox中deg选项数量的错误。

以下是可以工作的示例代码（也适用于Firefox），度数选择为120而非360：

http://jsfiddle.net/qYJHm/5/

@keyframes rotate {
    0% {
        -webkit-transform: rotate3d(1,1,1,0deg) translate3d(100px,100px,100px);
        -moz-transform: rotate3d(1,1,1,0deg) translate3d(100px,100px,100px);
        -o-transform: rotate3d(1,1,1,0deg) translate3d(100px,100px,100px);
        -ms-transform: rotate3d(1,1,1,0deg) translate3d(100px,100px,100px);
        transform: rotate3d(1,1,1,0deg) translate3d(100px,100px,100px);
    }

    100% {
        -webkit-transform: rotate3d(1,1,1,120deg) translate3d(100px,100px,100px);
        -moz-transform: rotate3d(1,1,1,120deg) translate3d(100px,100px,100px);
        -o-transform: rotate3d(1,1,1,120deg) translate3d(100px,100px,100px);
        -ms-transform: rotate3d(1,1,1,120deg) translate3d(100px,100px,100px);
        transform: rotate3d(1,1,1,120deg) translate3d(100px,100px,100px);
    }
}

- faby

---

谢谢，但是模糊的动画也不起作用。我希望骰子能够完全旋转。 - vahidseo

我已经修好了。谢谢。 - vahidseo