html - CSS3 动画不适用于 Firefox 但适用于 chrome

Question

我正在尝试让我的动画在 firefox 上运行，它在 google chrome 上运行良好，但在 firefox 或任何其他浏览器上运行不正常。

这是 html 标记

<div id="blo"></div>

和 CSS 表

#blo {
width: 44px;
height: 43px;
background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);border-radius: 50%;
background-size: 86px, 43px;
box-shadow: inset 5px 0 17px 0px rgb(5, 5, 5), inset -2px 1px 3px 1px rgba(255, 255, 255, 0.2);
-webkit-animation-name: rotate;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 4s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
z-index: 9999;
position: relative;


@-webkit-keyframes rotate {
    from { background-position-x: 0px; }
    to { background-position-x: 86px; }
}


@-ms-keyframes rotate {
    from { background-position-x: 0px; }
    to { background-position-x: 86px; }
}

@-moz-keyframes rotate {
    from { background-position-x: 0px; }
    to { background-position-x: 86px; }
}

fiddle :http://jsfiddle.net/J22TN/1/

@keyframes rotate {
    from { background-position-x: 0px; }
    to { background-position-x: 86px; }
}

Answer 1

将@keyframes 更改为:

@keyframes rotate {
        from { background-position: 0 0; }  // changed position-x to position: 0 0
        to { background-position: 86px 0; }
    }

此外，删除所有 -moz- 行。 @keyframe 动画直接被firefox支持!

您的最终 CSS 应该是这样的:

#blo {
    width: 44px;
    height: 43px;
    background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);border-radius: 50%;
    background-size: 86px, 43px;
    box-shadow: inset 5px 0 17px 0px rgb(5, 5, 5), inset -2px 1px 3px 1px rgba(255, 255, 255, 0.2);
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 9999;
    position: relative;

    }

    @-webkit-keyframes rotate {
        from { background-position-x: 0px; }
        to { background-position-x: 86px; }
    }

    @keyframes rotate {
        from { background-position: 0 0; }
        to { background-position: 86px 0; }
    }