CSS - circular movement animation

Recently, when playing with CSS animation, I was wondering how to create a circular movement e.g. the moon orbiting around the earth.

So after some experimentation and googling this is what i came up with:


The trick is to

  1. add a rotation animation to the moon:
animation: rotation 3s linear infinite;
  1. move the rotation point from the middle of the moon to earths center:
transform-origin: 25px 200px;