CSS3 动画在 Firefox 中不起作用答案

【问题标题】：CSS3 animation is not working in FirefoxCSS3 动画在 Firefox 中不起作用
【发布时间】：2014-07-18 22:36:33
【问题描述】：

这在 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/

【问题讨论】：

标签： css animation transform

【解决方案1】：

如您所见here 这是 Firefox 中 deg 选项数量的错误

具有不同数字（120 而不是 360）的工作小提琴（也在 Firefox 中）

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

【讨论】：

谢谢，但是，模糊动画也不起作用。我想让骰子一直旋转。
我已经解决了。谢谢。