Starting a CSS animation from a different position

Issue

I am building a model of the solar system and I am using CSS animations to animate the planets moving around the sun like so:

.earthMini {
  border-radius: 50%;
  position: absolute;
  --radius: 1rem;
  top: calc(50% - var(--radius));
  left: calc(50% - var(--radius));
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  background: url("../../planetTextures/earth.jpg") repeat-x;
  background-size: 100% 100%;
  animation: earthOrbit 45s linear infinite, translateBackground 50s infinite linear;
}
@keyframes earthOrbit {
  from {
    transform: rotate(0deg) translateX(13rem) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(13rem) rotate(-360deg);
  }
}

This is working great, however when the page first loads all of the planets are animating from the same start position:

I am seeking a way to have each planet have a different start position in its orbit.

I have a codesandbox here with my full code.

Solution

You can use a negative animation-delay rule to have the animation start further in their initial animation.

you could set this through some arbitrary values in your css, or apply an actual random using javascript.

.earthMini {
  border-radius: 50%;
  position: absolute;
  --radius: 1rem;
  top: calc(50% - var(--radius));
  left: calc(50% - var(--radius));
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  background: url("../../planetTextures/earth.jpg") repeat-x;
  background-size: 100% 100%;
  animation: earthOrbit 45s linear infinite, translateBackground 50s infinite linear;
  animation-delay: -45s; // <- this will place earth at the point of animation for 45s, 
}
@keyframes earthOrbit {
  from {
    transform: rotate(0deg) translateX(13rem) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(13rem) rotate(-360deg);
  }
}

your codepen with some modifications

Answered By - Lars