请帮助我,我看不到错误。我尝试了一切。谢谢大家。您可以在此链接上查看我的代码。
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 中完全失效。有什么想法吗?
最佳答案
没有标准的 background-position-x
属性(特别是 Firefox 不支持该非标准功能)。
关于CSS3 动画不适用于 Opera 和 Firefox,但适用于 Chrome 和 Safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15560651/