Lezz do this in action

total time = 12s

animation time (%) = 8.33% (8.33% = 1s of the time)animation pause (%) = 16.67% (16.67% = 2s of the time)

percentage of the animation keyframe0%→ 8.33%→ 25%→ 33.33%→ 50%→ 58.33%→75%→ 83.33%→ 100%

Since the animation rotates for 360deg and we have 4 iterations.keyframe value = 360 / 4 = 90deg

Now we have,

0deg → 90deg → 180deg → 270deg → 360deg [deg in each iteration]

Now that we have all the values that we need, let’s add this to our code.

.planet{   animation: rotateEarth 12s infinite}

@keyframes rotateEarth {  0% {    transform: rotate(0deg)  }  8.33% {    transform: rotate(90deg)  }  25% {    transform: rotate(90deg)  }  33.33% {    transform: rotate(180deg)  }  50% {    transform: rotate(180deg)  }  58.33% {    transform: rotate(270deg)  }  75% {    transform: rotate(270deg)  }  83.33% {    transform: rotate(360deg)  }  100% {    transform: rotate(360deg)  }}

As you can see in the above code, there are some keyframes that have the same value. We can write less code by comma separate the keyframes that have the same value.

@keyframes rotateEarth {  0% {    transform: rotate(0deg)  }  8.33%, 25% {    transform: rotate(90deg)  }  33.33%, 50% {    transform: rotate(180deg)  }  58.33%, 75% {    transform: rotate(270deg)  }  83.33%, 100% {    transform: rotate(360deg)  }}