SOURCE

<div class="solar-system">
    <div class="sun"></div>
    <div class="earth-system">
        <div class="earth-track">
            <div class="em-system">
                <div class="earth"></div>
                <div class="moon-system">
                    <div class="moon-track">
                        <div class="moon"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

* {
  margin: 0;
  padding: 0;
}

.solar-system {
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: black;
  overflow: hidden;
}


.sun {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.earth-system {
  height: 700px;
  width: 700px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.earth-track {
  height: 700px;
  width: 700px;
  border-radius: 50%;
  border: 1px solid gray;
  animation: earth 12s linear infinite;
}

.em-system {
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  margin: auto;
  transform: translate(0%, -50%);
}

.earth {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50px;
  width: 50px;
  background-color: skyblue;
  border-radius: 50%;
}

.moon-system {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 150px;
  width: 150px;
}

.moon-track {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  border: 1px solid gray;
  animation: moon 1s linear infinite;
}

.moon {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  margin: auto;
  transform: translate(0%, -50%);
  background-color: yellow;
}


@keyframes earth
{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes moon
{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}