Rotierender Globus in CSS

Question 1

Ich erstelle einen rotierenden Erdeffekt in CSS. Ich habe den Globus in CSS erstellt:

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

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

Erweitern Sie das Snippet

Aber es stoppt und dann wird das Bild zurückgesetzt und erneut gestartet. Ich möchte, dass es sich reibungslos bewegt, ohne zu ruckeln. Vielen Dank!

Question 2

In background-position: 500px 0px;ersetzen 500px mit 610px, das ist diebackground-size

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: 610px 0px;
  }
}
@-webkit-keyframes rotate {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 610px 0px;
  }
}

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

Erweitern Sie das Snippet

Question 3

Das Problem in Ihrem Code ist , dass das image ( 610px ) und die Animation des Offset ( 500px ) unterscheiden und bei dem Zurücksetzen des Animations es Hopfen (110px).

Ein einfacher Trick, den ich gerne verwende, anstatt den Animationsversatz in Pixel zu definieren : Definieren Sie ihn in Prozent .
Anstatt ihm zu sagen, dass er sich um 610px bewegen soll, sage ich ihm, dass er sich zu 100% bewegen soll .

Der Vorteil der 100% -Methode besteht darin, dass Sie nicht alle fest codierten Werte in Ihrem CSS ändern müssen, wenn Sie das Bild bearbeiten möchten. Dies sollte IMO die bevorzugte Methode sein.

Bitte beachten Sie: Es scheint, als würde ein Wechsel von 0 auf -100% einen Sprung erzeugen. Da die Drehung in die richtige Richtung erfolgen muss, habe ich versucht, 100% zu starten und auf 0 zu verschieben, aber zu diesem Zeitpunkt ist das Bild nicht mehr vorhanden.

@keyframes rotate {
   from { background-position:  100%  0; }
   to {   background-position:    0   0; }
}

Hier ist das Snippet, jedoch mit 100% anstelle eines Pixelwerts:
* Bitte beachten Sie: Die Animation ist immer noch gesprungen, aber ich kann keinen neuen Code testen, da das Bild nicht mehr vorhanden ist. Die Logik funktioniert, aber diese Implementierung scheint nicht zu funktionieren. Der folgende Code ist nur eine Demo mit dem TS-Code.

Code-Snippet anzeigen

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;
}
@keyframes rotate {
   from { background-position:  100%  0; }
   to {   background-position:    0   0; }
}

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

Erweitern Sie das Snippet