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/

Answer 1

你可以看到here这是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);
    }
}

CSS3动画在Firefox中不起作用

1 个答案: