moon.html

<style>
  @keyframes cresent {
	 0% {
		 transform: translate(-100px, 30px) scale(0.9);
		 box-shadow: none;
	}
	 50% {
		 transform: translate(0px, 0px) scale(1.02);
		 box-shadow: 0 0 10px #f9f3f2, 0 0 80px 8px #c7938b;
		 background-color: #efdbd8;
	}
	 30% {
		 transform: translate(0px, 1) scale(0.9);
		 box-shadow: none;
	}
	 70% {
		 transform: translate(10px, 1) scale(0.9);
		 box-shadow: none;
	}
	 100% {
		 transform: translate(100px, -30px) scale(0.9);
		 box-shadow: none;
	}
}
 html {
	 box-sizing: border-box;
}
 *, *::after, *::before {
	 box-sizing: inherit;
}
 html, body {
	 height: 100%;
}
 body {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 background-image: linear-gradient(30deg, #182c51, #09101e);
	 overflow: hidden;
}
 .moon {
	 background-image: linear-gradient(30deg, #13223f, #0e1a30);
	 width: 256px;
	 height: 256px;
	 border-radius: 50%;
	 position: relative;
}
 .moon::before {
	 content: '';
	 background-color: #c7938b;
	 position: absolute;
	 display: block;
	 height: 100%;
	 width: 100%;
	 border-radius: 50%;
	 z-index: -1;
	 animation: 9.2s cresent linear infinite alternate;
}
 @media (max-width: 768px) {
	 .moon {
		 width: 160px;
		 height: 160px;
	}
}
 
</style>
<div class="moon"></div>