CSS3 动画在 Firefox 中不起作用

Posted 2023-03-06

【中文标题】CSS3 动画在 Firefox 中不起作用

【英文标题】：CSS3 animation is not working in 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/

【参考方案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);
    

【讨论】：

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

我已经解决了。谢谢。