css - CSS3动画无法在Opera和Firefox中运行，但可以在Chrome和Safari中运行

请帮助我，我看不到错误。我尝试了一切。谢谢大家您可以在此链接上看到我的代码。

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;}
      }

因此，它可以完美地在Safari中运行，Chrome中几乎没有死机，但是还可以。我的动画在Opera和Firefox中完全消失了。任何想法？

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

最佳答案

没有标准的background-position-x属性（尤其是Firefox不支持该非标准功能）。

关于css - CSS3动画无法在Opera和Firefox中运行，但可以在Chrome和Safari中运行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15560651/