
Demo:
To create the CSS Earth and Moon animation follow the steps below:
- Add HTML
- Add CSS
Step1.
Add HTML
<div class="container">
<div class="clouds"></div>
<div class="planet">
</div>
<div class="moon"></div>
<div class="up"></div>
</div>
Step2.
Add CSS
Set the colour and the position of the background and the elements:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #072137;
}
.container {
position: relative;
}
Add clouds:
.clouds {
position: absolute;
background-color: #041c2f;
width:200px;
height: 40px;
border-radius:50px;
top:-45px;
left:90px;
box-shadow: -140px 40px #072137,140px 40px #072137,20px 40px #041c2f, 20px 80px #041c2f, 180px 120px #072137, 20px 120px #041c2f, 70px 160px #041c2f, -180px 160px #041c2f, -290px 200px #072137,-10px 200px #072137,-120px 200px #041c2f, -140px 240px #041c2f;
}
.clouds:before {
content:"";
position:absolute;
width:7px;
height: 7px;
border-radius: 50%;
background-color: rgba(255,255,255,0.3);
top:-10px;
box-shadow: -100px 100px rgba(255,255,255,0.3), 130px 230px rgba(255,255,255,0.3), 50px 310px rgba(255,255,255,0.3), -130px 215px rgba(255,255,255,0.3);
}
.clouds:after {
content:"";
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: rgba(255,255,255,0.2);
left:50px;
top:20px;
box-shadow: 100px 100px rgba(255,255,255,0.2), -100px 240px rgba(255,255,255,0.2);
}
Style the planet:
.planet {
position: relative;
width: 200px;
height: 200px;
background-color: #00a5cf;
border-radius:50%;
overflow:hidden;
}
.planet:before {
content:"";
position: absolute;
background-color: #368715;
width:100px;
height:25px;
border-radius:20px;
left:15px;
box-shadow:60px 25px #00a5cf,25px 25px #368715, -25px 25px #368715, 50px 50px #368715, -15px 50px #368715, 90px 75px #00a5cf,30px 75px #368715, -15px 75px #368715, -25px 0px #368715;
top:100px;
}
.planet:after {
content:"";
position: absolute;
width:200px;
height:200px;
border-radius: 50%;
top:0;
box-shadow: inset -10px 10px rgba(0,0,0,0.2);
}
.up {
position: absolute;
background-color: #00a5cf;
width:200px;
height:100px;
border-radius: 100px 100px 0 0;
top:0;
overflow:hidden;
}
.up:before {
content:"";
position: absolute;
background-color: #368715;
width:100px;
height:25px;
border-radius:20px;
left:-10px;
box-shadow:60px 25px #00a5cf,25px 25px #368715, -25px 25px #368715, 50px 50px #368715, -5px 50px #368715, 90px 75px #00a5cf,30px 75px #368715, -10px 75px #368715;
}
.up:after {
content:"";
position: absolute;
width:200px;
height:100px;
border-radius: 100px 100px 0 0;
top:0;
box-shadow: inset -10px 10px rgba(0,0,0,0.2);
}

Style the moon with the offset-path:
.moon {
position: absolute;
width:40px;
height:40px;
background-color: #d6d6d6;
box-shadow: inset -5px 5px rgba(0,0,0,0.2);
border-radius:50%;
top:-135px;
left:-175px;
overflow:hidden;
offset-path: path("M280.25,191c38.55,0,74.78,5.44,102,15.32C409.18,216.08,424,228.93,424,242.5s-14.82,26.42-41.74,36.18C355,288.56,318.8,294,280.25,294s-74.78-5.44-102-15.32c-26.91-9.76-41.74-22.61-41.74-36.18s14.83-26.42,41.74-36.18c27.24-9.88,63.47-15.32,102-15.32m0-1c-79.95,0-144.76,23.51-144.76,52.5S200.3,295,280.25,295,425,271.49,425,242.5,360.19,190,280.25,190Z");
animation: move 6s linear infinite;
}
.moon:before, .moon:after {
content:"";
position: absolute;
width:10px;
height:10px;
border-radius:50%;
box-shadow: inset 2px 2px rgba(0,0,0,0.2);
background-color: #e5e5e5;
}
.moon:before {
top:5px;
left:25px;
}
.moon:after {
top:35px;
left:10px;
}
Animate the moon (Orbiting around the Earth):
@keyframes move {
to {
offset-distance: 50%;
}
}
Enjoy coding!
Read also:
CSS Train Front Animation/ Loader