.sphere
.sphere
.sphere
.sphere

html {
	height: 100%;
	background-color: rebeccapurple;
}

body {
	position: relative;
	margin: 5rem;
	width: calc(100% - 10rem);
	height: calc(100% - 10rem);
	background-color: rgba(0,0,0,.25);
	box-shadow: 1rem 1rem 5rem rgba(0,0,0,.5);
}

.sphere {
	position: absolute;
	width: 5rem;
	height: 5rem;
	top: 0;
	left: 0;
	transform: translate3d(-50%,-50%,0);
	background-color: #fc0;
	border-radius: 50%;
	box-shadow: 1rem 1rem 3rem rgba(0,0,0,.5);
	
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	
	&:nth-child(1) { animation-delay: .4s; }
	&:nth-child(2) { animation-delay: .3s; }
	&:nth-child(3) { animation-delay: .2s; }
	&:nth-child(4) { animation-delay: .1s; }
}

@keyframes example {
	0%   { top: 0; left: 0; }
	25%  { top: 0; left: 100%; }
	50%  { top: 100%; left: 100%; }
	75%  { top: 100%; left: 0; }
	100% { top: 0; left: 0; }
}