带有旋转的CSS3动画

Question

I am using a background to rotate globe. But it stop/jerk after some rotation. I am not sure where i am making mistake and why its jerking after some rotations.

Here is the code with 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

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

Answer 2

Add this to #earth

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

It'll use the the GPU for hardware acceleration.

Answer 3

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


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

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


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

Try changing the background-position-x from "TO", one thing that might be a problem is that it'll rotate faster, but then you just extend the animation time.

Answer 4

Edited for 43px globe:

Match background-size like this:

#earth {
width: 43px;
height: 43px;
background-size: 86px, 43px;  //Height should match height of globe (unless you don't want to see the poles) and width should be 2x height

@-webkit-keyframes rotate {
  from { background-position: 0px 0px; }
  to { background-position: 86px 0px; } //Match Width
}


@-ms-keyframes rotate {
  from { background-position: 0px 0px; }
  to { background-position: 86px 0px; } //Match Width
}

@-moz-keyframes rotate {
  from { background-position: 0px 0px; }
  to { background-position: 86px 0px; } //Match Width
}


@keyframes rotate {
  from { background-position: 0px 0px; }
  to { background-position: 86px 0px; } //Match Width
}

Working fiddle:

http://jsfiddle.net/k54QN/18/

Answer 5

Change the background-position to the width of the image, and don't use background-position-x. It's not supported in most browsers.

 body {
      background-color: black;
    }

    #earth {
     width: 243px;
    height: 243px;
        background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);border-radius: 50%;
    background-size: 620px;
    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: 0px 0px; }
      to { background-position: 620px 0px; }
    }


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

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


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