HTML5アニメーションはChromeで動作しますがFirefoxでは動作しません

Question

以下は回転している地球の地球です。このアニメーションはChromeで正常に動作していますが、Firefoxではまったく動作しません。これを解決する方法についての助け？ 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

あなたはまだFirefoxで実装されていません@keyframes

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

jsFiddle

background-position-xとbackground-position-yに全体としてbackground-positionプロパティを設定する必要があります。しかし、将来彼らが追加されるようです。

Another SO question on this