html - 带旋转的 Css3 动画

Question

我正在使用背景来旋转地球。但它在旋转后停止/猛拉。我不确定我在哪里犯了错误以及为什么在旋转后它会抽搐。

这是带 fiddle 的代码

HTML

  <div id="earth">
  </div>

CSS

body {
background-color: black;
}

#earth {
width: 143px;
height: 143px;
background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);border-radius: 50%;
background-size: 320px;
box-shadow: inset 1px 0 27px 1px rgb(5, 5, 5), inset -3px 0 5px 2px rgba(255, 255, 255, 0.2);
-webkit-animation-name: rotate;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 4s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
z-index: 9999;
position: relative;
margin-left: 52px;

}

@-webkit-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
}


@-ms-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
}

@-moz-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
}


@keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
}

fiddle :http://jsfiddle.net/k54QN/

Answer 1

您的“to”background-position 应该等于图像的宽度。