.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; }
}