JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="body">
    <div class="sun"></div>
    <div class="moon"></div>
</div>

CSS

*{
	box-sizing: border-box;
}
div.box {
	color: black;
	font-size: 50px;
	animation: luka 3s ease;
	animation-iteration-count: infinite;
}
@keyframes luka{
	from { transform: translateX(0); }
	to { transform: translateX(100px); }
}

div.body {
	width: 700px;
	height: 700px;
	background: #6BB9F0;
	color: #6BB9F0;
	margin: auto;
	position: relative;
	overflow: hidden;
	animation: earth 3s;
	animation-iteration-count: infinite;
	animation-delay: 1.5s;
}
div.sun {
	width: 100px; 
	height: 100px;
	border-radius: 50%;
	background: #F9BF3B;
	box-shadow: 0 0 20px #D35400;
	position: absolute;
	left: -120px;
	top: 30px;
	animation: sun 3s ease-in;
	animation-iteration-count: infinite;
	animation-delay: 0.5s;
}
div.moon {
	width: 70px;
	height: 70px;
	position: absolute;
	border-radius: 50%;
	background: #FDE3A7;
	box-shadow: 0 0 20px white;
	top: 60px;
	left: -90px;
	animation: sun 3s ease-in;
	animation-iteration-count: infinite;
	animation-delay: 2s;
}
@keyframes sun {
	from { transform: translateX(0); }
	to { transform: translateX(1620px); }
}
@keyframes earth {
	0% { background: #6BB9F0; }
	50% { background: #22313F }
	100% { background: #6BB9F0; }	
}