I have a project where I am creating some planets and they need to rotate. I am a beginner currently in school. I found some code that rotates but It starts to skip. The alternative is to have it alternate in rotating but then that doesn't look right.

How can I fix this with CSS?

```css
.earth {
    width: 300px;
    height: 300px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 20px 20px #000 inset, 0 0 20px 2px #000;
}

.earth:after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: -20px -20px 50px 2px #000 inset;
    border-radius: 50%;
}

.earth > div {
    width: 200%;
    height: 100%;
    animation: spin 30s linear infinite;
    background: url(https://i.stack.imgur.com/3SLqF.jpg);
    /*orginal image at https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Earthmap1000x500compac.jpg/640px-Earthmap1000x500compac.jpg */
    background-size: cover;
}

@keyframes spin {
    to {
        transform: translateX(-50%);
    }
}
```

```html
<div class="earth">
  <div></div>
</div>
```

Here is the GIF image of the issue: <https://imgur.com/a/f7nUtrW//>