Make div orbit around a moving div - html

Question

I'm trying to learn animation and keyframes in CSS3, and I wonder how I can make #moon-orbit orbit around #earth? Like it does in real life, you know.
html, body {
background-color : #000000;
height : 90%;
width : 90%;
}
#sun {
background-color : #ba8f27;
border-radius : 200px;
box-shadow : 0 0 128px red;
margin-top : -100px;
margin-left : -100px;
left : 50%;
height : 200px;
position : absolute;
top : 50%;
width : 200px;
}
#earth-orbit {
border: 2px solid #373737;
border-radius: 50%;
left: 50%;
height: 500px;
margin-top: -250px;
margin-left: -250px;
position: absolute;
top: 50%;
width: 500px;
-webkit-animation: spin-right 10s linear infinite;
-moz-animation: spin-right 10s linear infinite;
-ms-animation: spin-right 10s linear infinite;
-o-animation: spin-right 10s linear infinite;
animation: spin-right 10s linear infinite;
}
#moon-orbit {
border-radius: 50%;
left: 50%;
height: 500px;
margin-top: -250px;
margin-left: -250px;
position: absolute;
top: 50%;
width: 500px;
transform: rotate(360deg);
transform-origin: 50% 100%;
}
#earth {
background-color : #2d7ddc;
border-radius : 50px;
margin-left : -25px;
margin-top : -25px;
height : 50px;
left : 50%;
position : absolute;
top : 0%;
width : 50px;
}
#moon {
background-color : #b2b2b2;
border-radius : 50px;
margin-left : -25px;
margin-top : -25px;
height : 16px;
left : 43%;
position : absolute;
top : 0%;
width : 16px;
}
#-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
}
}
<div id="sun"></div>
<div id="earth-orbit">
<div id="earth"></div>
<div id="moon-orbit">
<div id="moon"></div>
</div>
</div>
jsFiddle demo

Answer 1

You can add a holder for the moon and positioned it in the center of the earth and rotate that div:
Demo
Added stuff:
HTML:
<div class="moon-holder">
<div id="moon"></div>
</div>
CSS:
.moon-holder {
position: absolute;
left: 50%;
top: 0;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
-webkit-animation: spin-right 5s linear infinite;
-moz-animation: spin-right 5s linear infinite;
-ms-animation: spin-right 5s linear infinite;
-o-animation: spin-right 5s linear infinite;
animation: spin-right 5s linear infinite;
}