CSS3動畫在Opera和Firefox中不起作用，但適用於Chrome和Safari

Question

請幫助我，我看不到錯誤。我嘗試了一切。感謝人們。你可以在這個鏈接上看到我的代碼。

http://jsfiddle.net/astrogastro/dFZgn/

#sun{ 
    width: 500px; 
    height: 500px; 
    background: yellow; 
    background-image: url('img/sunmap.jpg'); 
    background-repeat: repeat-x; 
    background-position: center; 
    border-radius: 50%; 
    background-size:1000px; 
    animation-name:rotateSun; 
    animation-duration: 6s; 
    animation-iteration-count: infinite; 
    animation-timing-function:linear; 
    -o-animation-name:rotateSun; 
    -o-animation-duration: 6s; 
    -o-animation-iteration-count: infinite; 
    -o-animation-timing-function:linear; 
    -moz-animation-name:rotateSun; 
    -moz-animation-duration: 10s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function:linear; 
    -webkit-animation-name:rotateSun; 
    -webkit-animation-duration: 10s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function:linear; 
    box-shadow: 0 0 7em #FFFF4D, 0 0 0.5em #FFFF4D, 0 0 0.3em #FFFF4D; 
    float: left; 
     } 

    @keyframes rotateSun{ 
    from {background-position-x:1px;} 
    to {background-position-x:1011px;} 
     } 


@-o-keyframes rotateSun{ 
    from{background-position-x:1px;} 
    to{background-position-x:1011px;} 
     } 

@-moz-keyframes rotateSun{ 
    from {background-position-x:1px;} 
    to {background-position-x:1011px;} 
     } 

@-webkit-keyframes rotateSun{ 
    from {background-position-x: 0px;} 
    to {background-position-x:1010px;} 
     } 

所以，它的工作原理pefectly在Safari瀏覽器，在Chrome瀏覽器的小冷凍，但它的好。我的動畫在Opera和Firefox中完全死掉了。任何想法？

http://www.astrogastro.byethost24.com/

Answer 1

你需要你的前綴@keyframes以及動畫...

Answer 2

沒有標準background-position-x財產（尤其是Firefox不會有不規範的功能支持）。