HTML5 CSS3 Moon | HTML 5 & CSS 3 - Create a Moon

CSS 3 Moon Code

The code below creates a red moon with animation:

<style>
.moon {
 margin: 50px 0 0 0;
 width: 200px;
 height: 200px;
}
.moon_left {
 width: 100px;
 height: 100px;
 background: red;
 border-radius: 50px;
}
.moon_right {
 width: 102px;
 height: 102px;
 top: -101px;
 left: -1;
 position: relative;
 background: white;
 border-radius: 50px;
 -webkit-animation: moon_right_position_change 5s ease-in 2s infinite alternate; /* Chrome, Safari, Opera */
 animation: moon_right_position_change 5s ease-in 2s infinite alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes moon_right_position_change {
 25% {left: 25px;}
 50% {left: 50px;}
 100% {left: 100px;}
}

/* Standard syntax */
@keyframes moon_right_position_change {
 25% {left: 25px;}
 50% {left: 50px;}
 100% {left: 100px;}
} 

</style>
<div class="moon">
 <div class="moon_left"></div>
 <div class="moon_right"></div>
</div>