0

请帮助我，我看不到错误。我什么都试过了。谢谢人们。你可以在这个链接上看到我的代码。

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/

4

2 回答 2

1

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

于 2013-03-22T01:11:05.727 回答
0

You need to prefix your @keyframes as well as your animation...

于 2013-03-22T00:32:17.223 回答