<div class="background">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
body {
  margin: 0;
  overflow: hidden;
}

.background {
  width: 100vw;
  height: 100vh;
  background: #3E1E68;
}

.background span {
  width: 20vmin;
  height: 20vmin;
  border-radius: 20vmin;
  backface-visibility: hidden;
  position: absolute;
  animation-name: move;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.background span:nth-child(1) {
  color: #E45A84;
  top: 87%;
  left: 64%;
  animation-duration: 13.3s;
  animation-delay: -15.7s;
  transform-origin: 7vw -21vh;
  box-shadow: 40vmin 0 5.4989919742vmin currentColor;
}
.background span:nth-child(2) {
  color: #FFACAC;
  top: 77%;
  left: 27%;
  animation-duration: 12.7s;
  animation-delay: -9.5s;
  transform-origin: 10vw -21vh;
  box-shadow: 40vmin 0 5.2701546229vmin currentColor;
}
.background span:nth-child(3) {
  color: #E45A84;
  top: 89%;
  left: 58%;
  animation-duration: 11s;
  animation-delay: -13.4s;
  transform-origin: -22vw 25vh;
  box-shadow: 40vmin 0 5.2809403638vmin currentColor;
}
.background span:nth-child(4) {
  color: #583C87;
  top: 71%;
  left: 67%;
  animation-duration: 14.1s;
  animation-delay: -1.1s;
  transform-origin: 14vw 17vh;
  box-shadow: 40vmin 0 11.073631568vmin currentColor;
}
.background span:nth-child(5) {
  color: #583C87;
  top: 13%;
  left: 99%;
  animation-duration: 14.7s;
  animation-delay: -1.9s;
  transform-origin: -4vw -9vh;
  box-shadow: 40vmin 0 7.151922344vmin currentColor;
}
.background span:nth-child(6) {
  color: #583C87;
  top: 29%;
  left: 84%;
  animation-duration: 10.9s;
  animation-delay: -2.6s;
  transform-origin: 2vw 18vh;
  box-shadow: -40vmin 0 6.4185675774vmin currentColor;
}
.background span:nth-child(7) {
  color: #FFACAC;
  top: 83%;
  left: 90%;
  animation-duration: 14.6s;
  animation-delay: -6.1s;
  transform-origin: -11vw 25vh;
  box-shadow: 40vmin 0 11.0267506807vmin currentColor;
}
.background span:nth-child(8) {
  color: #583C87;
  top: 76%;
  left: 6%;
  animation-duration: 13.6s;
  animation-delay: -2.6s;
  transform-origin: 3vw 16vh;
  box-shadow: -40vmin 0 9.374024181vmin currentColor;
}
.background span:nth-child(9) {
  color: #583C87;
  top: 85%;
  left: 45%;
  animation-duration: 13.2s;
  animation-delay: -14.4s;
  transform-origin: 10vw 15vh;
  box-shadow: -40vmin 0 9.2145533134vmin currentColor;
}
.background span:nth-child(10) {
  color: #FFACAC;
  top: 28%;
  left: 3%;
  animation-duration: 11.7s;
  animation-delay: -4.7s;
  transform-origin: -20vw -18vh;
  box-shadow: 40vmin 0 12.4728284995vmin currentColor;
}
.background span:nth-child(11) {
  color: #E45A84;
  top: 83%;
  left: 70%;
  animation-duration: 15.2s;
  animation-delay: -0.8s;
  transform-origin: -2vw 11vh;
  box-shadow: -40vmin 0 8.4226224139vmin currentColor;
}
.background span:nth-child(12) {
  color: #FFACAC;
  top: 48%;
  left: 20%;
  animation-duration: 15.6s;
  animation-delay: -7.6s;
  transform-origin: 17vw -22vh;
  box-shadow: -40vmin 0 6.1186940809vmin currentColor;
}
.background span:nth-child(13) {
  color: #FFACAC;
  top: 25%;
  left: 32%;
  animation-duration: 12s;
  animation-delay: -5.4s;
  transform-origin: -5vw -2vh;
  box-shadow: 40vmin 0 8.5683135885vmin currentColor;
}
.background span:nth-child(14) {
  color: #E45A84;
  top: 46%;
  left: 77%;
  animation-duration: 13.4s;
  animation-delay: -8.6s;
  transform-origin: 0vw -21vh;
  box-shadow: 40vmin 0 8.8761060218vmin currentColor;
}
.background span:nth-child(15) {
  color: #E45A84;
  top: 19%;
  left: 37%;
  animation-duration: 13.2s;
  animation-delay: -11.5s;
  transform-origin: -12vw 6vh;
  box-shadow: -40vmin 0 12.6747646257vmin currentColor;
}
.background span:nth-child(16) {
  color: #583C87;
  top: 63%;
  left: 83%;
  animation-duration: 13.8s;
  animation-delay: -6.3s;
  transform-origin: -11vw 8vh;
  box-shadow: -40vmin 0 5.5997316731vmin currentColor;
}
.background span:nth-child(17) {
  color: #583C87;
  top: 19%;
  left: 52%;
  animation-duration: 12.9s;
  animation-delay: -0.1s;
  transform-origin: 8vw -3vh;
  box-shadow: 40vmin 0 7.7373093096vmin currentColor;
}
.background span:nth-child(18) {
  color: #583C87;
  top: 82%;
  left: 14%;
  animation-duration: 15s;
  animation-delay: -8.6s;
  transform-origin: 2vw -9vh;
  box-shadow: -40vmin 0 5.0331967733vmin currentColor;
}
.background span:nth-child(19) {
  color: #583C87;
  top: 64%;
  left: 14%;
  animation-duration: 14.5s;
  animation-delay: -15.8s;
  transform-origin: 1vw 7vh;
  box-shadow: -40vmin 0 7.7417605407vmin currentColor;
}
.background span:nth-child(20) {
  color: #E45A84;
  top: 58%;
  left: 73%;
  animation-duration: 12.1s;
  animation-delay: -10.1s;
  transform-origin: 1vw -24vh;
  box-shadow: 40vmin 0 11.5826724933vmin currentColor;
}

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}
Rerun