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

所以，它在 Safari 中完美运行，在 Chrome 中几乎没有冻结，但没关系。我的动画在 Opera 和 Firefox 中完全消失了。有什么想法吗？

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

Answer 1

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

Answer 2

您需要为 @keyframes 和动画添加前缀...