Globe rotatif en CSS

Je crée un effet de 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; } } 
 

Mais il s’arrête puis l’image se réinitialise et recommence. Je veux que ça bouge sans heurt. Merci beaucoup!

En background-position: 500px 0px; remplacer 500px avec 610px, qui est la 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; } } 
 

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

Un simple truc que j’aime utiliser au lieu de définir le décalage de l’animation en pixel: définissez-le en pourcentage .
Au lieu de lui dire de déplacer 610px, je lui dis de bouger à 100% .

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

S’il vous plaît noter: Il semble que le déplacement de 0 à -100% crée un saut. Comme nous avons besoin de la rotation pour aller dans la bonne direction, j’ai essayé de démarrer à 100% et de le déplacer à 0, mais à ce stade, l’image n’existe plus.

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

Voici l’extrait de code, mais avec 100% au lieu d’une valeur de pixel:
* S’il vous plaît noter: l’animation encore sauté, mais je ne peux pas tester le nouveau code, car l’image n’existe plus. La logique fonctionne, mais cette implémentation semble ne pas l’être. 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; } }