'Css3 Animation with rotate

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/

htmlcss


Solution 1:[1]

Your "to" background-position should be equal to the width of the image.

Solution 2:[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.

Solution 3:[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.

Solution 4:[4]

Change the background-position to the width of the image.

 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; }
 }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Niet the Dark Absol
Solution 2 Ali Green
Solution 3 Rickedb
Solution 4

Related Questions