title: Rotating globe in CSS
body: <p>I am creating a rotating earth effect in CSS. I have created the globe in CSS :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #111;
  }
  
  #earth {
      width: 300px;
      height: 300px;
      background: url(https://web.archive.org/web/20150807125159if_/http://www.noirextreme.com/digital/Earth-Color4096.jpg);
      border-radius: 50%;
      background-size: 610px;
      box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0),
      inset -6px 0 12px 4px rgba(255, 255, 255, 0.3);
      animation-name: rotate;
      animation-duration: 12s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      -webkit-animation-name: rotate;
      -webkit-animation-duration: 12s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
  }
  
  @keyframes rotate {
      from { background-position: 0px 0px; }
      to { background-position: 500px 0px; }
  }
  @-webkit-keyframes rotate {
      from { background-position: 0px 0px; }
      to { background-position: 500px 0px; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="earth"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>But it stops and then image resets and starts again. I want it to move smoothly without jerking. Thank you very much!</strong></p>