web-dev-qa-db-fra.com

Globe tournant en CSS

Je crée un effet Terre rotatif en CSS. J'ai créé le globe en CSS:

body {
  background-color: #111;
}

#earth {
    width: 300px;
    height: 300px;
    background: url(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>

Mais il s'arrête, puis l'image se réinitialise et recommence. Je veux qu'elle se déplace en douceur sans à-coups. Merci beaucoup!

htmlcsshtml5css3css-animations
73
user4420272

Dans background-position: 500px 0px; remplacez 500px par 610px, qui est le background-size

body {
  background-color: #111;
}
#earth {
  width: 300px;
  height: 300px;
  background: url(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>
91
The Pragmatick

Le problème dans votre code est que la taille de l'image (610px) et le décalage de l'animation (500px) diffèrent et lors de la réinitialisation de l'animation, il saute (110px).

Une astuce simple que j'aime utiliser au lieu de définir le décalage d'animation en pixel: Définissez-le en pourcentages.
Au lieu de lui dire de se déplacer de 610 px, je lui dis de se déplacer 100%.

Le bonus de la méthode 100% est que si vous pouvez modifier l'image, vous n'avez pas à modifier toutes les valeurs codées en dur dans votre CSS, qui, IMO, devrait être la méthode préférée.

Remarque: il semble que le passage de 0 à -100% crée un saut. Parce que nous avons besoin de la rotation pour aller dans la bonne direction, j'ai essayé de démarrer à 100% et de la déplacer vers 0, mais à ce stade, l'image n'existe plus. 

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

Voici l'extrait, mais avec 100% au lieu d'une valeur de pixel:
* Remarque: l'animation a encore sauté, mais je ne peux pas tester de nouveau code car l'image n'existe plus. La logique fonctionne, mais cette implémentation ne semble pas. Le code suivant n'est qu'une démo avec le code du TS. 

body {
  background-color: #111;
}
#earth {
  width: 300px;
  height: 300px;
  background: url(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>
46
Martijn