HTML5 Animation arbeitet an Chrome aber nicht Firefox

Question

Das Folgende ist ein Erdkugel, die sich dreht. Obwohl diese Animation in Chrome funktioniert, funktioniert sie bei Firefox überhaupt nicht und sie bleibt einfach stehen. Irgendwelche Hilfe, wie man das löst? JSFiddle.

<div id="page-wrapper"> 
     <div class="row"> 
       <div class="center-block img-responsive" id="earth"></div> 
     </div> 
    </div> 



#earth { 
    width: 100px; 
    height: 100px; 
    background: url('../images/Earth-Color.jpg'); 
    border-radius: 50%; 
    background-size: 210px; 
    box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0), 
     inset -3px 0 6px 2px rgba(255, 255, 255, 0.2); 
    animation-name: rotate; 
    animation-duration: 4s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
    margin-top:200px; 
} 


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

Answer 1

Sie benötigen die background-position Eigenschaft als Ganzes setzen in @keyframes

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

jsFiddle

background-position-x und background-position-y sind noch nicht in FireFox umgesetzt. Aber es scheint, dass sie in Zukunft hinzugefügt werden.

Another SO question on this