body {
	margin: 0;
}

* {
	animation: 10s linear infinite;
}

.sky {
	width: 100vw;
	height: 100vh;
	background-color: skyblue;
	display: flex;
	align-items: center;
	justify-content: center;
	animation-name: to-black;
	position: relative;
	overflow: hidden;
}

.sun,
.moon {
	position: absolute;
	width: 50vmin;
	height: 50vmin;
	border-radius: 50%;
}

.sun {
	background-color: gold;
	animation-name: animate-sun;
}

.moon {
	background-color: slategray;
	animation-name: animate-moon, to-black;
}

@keyframes to-black {
	50% {
		background-color: black;
	}
}

@keyframes animate-sun {
	50% {
		box-shadow: 0 0 5em 1em white;
	}
}

@keyframes animate-moon {
	from {
		transform: translateX(-100vmin);
	}
	
	to {
		transform: translateX(100vmin);
	}
}