Question

请帮帮我，我看不到bug。我尝试了一切。谢谢大家。你可以在这个链接上看到我的代码。

   #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和动画前加上... ...

CSS3 Animation不适用于Opera和Firefox，但适用于Chrome和Safari

2 个答案: