HTML5 Chrome üzerinde çalışan ancak Firefox'ta çalışmayan animasyon

Question

Aşağıdaki, dönen bir dünya küresidir. Bu animasyon Chrome'da iyi çalışıyor olsa da, Firefox'ta hiç işe yaramıyor ve hala duruyor. Bunu çözmek için herhangi bir yardım? 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

Henüz FireFox'ta uygulanmadı @keyframes

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

jsFiddle

background-position-x ve background-position-y bir bütün olarak background-position özelliğini ayarlamanız gerekir. Ama gelecekte eklenecek gibi görünüyor.

Another SO question on this