@keyframes move { 100% { transform: translate3d(0, 0, 1px) rotate(360deg); } } .background { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; background: #ffffff; overflow: hidden; } .background span { width: 20vmin; height: 20vmin; border-radius: 20vmin; backface-visibility: hidden; position: absolute; animation: move; animation-duration: 45; animation-timing-function: linear; animation-iteration-count: infinite; } .background span:nth-child(0) { color: #215c93; top: 39%; left: 33%; animation-duration: 22s; animation-delay: -9s; transform-origin: -7vw 1vh; box-shadow: -40vmin 0 5.202002275746903vmin currentColor; } .background span:nth-child(1) { color: #215c93; top: 52%; left: 62%; animation-duration: 52s; animation-delay: -3s; transform-origin: -19vw -3vh; box-shadow: 40vmin 0 5.264400744670137vmin currentColor; } .background span:nth-child(2) { color: #215c93; top: 56%; left: 63%; animation-duration: 22s; animation-delay: -21s; transform-origin: 2vw -15vh; box-shadow: 40vmin 0 5.207327792316766vmin currentColor; } .background span:nth-child(3) { color: #d77028; top: 99%; left: 58%; animation-duration: 44s; animation-delay: -29s; transform-origin: -19vw -1vh; box-shadow: -40vmin 0 5.451840174597106vmin currentColor; } .background span:nth-child(4) { color: #215c93; top: 29%; left: 22%; animation-duration: 32s; animation-delay: -20s; transform-origin: 6vw -21vh; box-shadow: -40vmin 0 5.984330827308159vmin currentColor; } .background span:nth-child(5) { color: #d77028; top: 45%; left: 70%; animation-duration: 21s; animation-delay: -28s; transform-origin: -2vw 9vh; box-shadow: -40vmin 0 5.543219247952314vmin currentColor; } .background span:nth-child(6) { color: #d77028; top: 58%; left: 58%; animation-duration: 25s; animation-delay: -6s; transform-origin: 4vw -12vh; box-shadow: -40vmin 0 5.787010443575496vmin currentColor; } .background span:nth-child(7) { color: #215c93; top: 35%; left: 31%; animation-duration: 39s; animation-delay: -1s; transform-origin: 23vw -11vh; box-shadow: -40vmin 0 5.66745926411192vmin currentColor; } .background span:nth-child(8) { color: #215c93; top: 70%; left: 8%; animation-duration: 20s; animation-delay: -24s; transform-origin: -21vw -17vh; box-shadow: -40vmin 0 5.171851050568047vmin currentColor; } .background span:nth-child(9) { color: #d77028; top: 58%; left: 72%; animation-duration: 17s; animation-delay: -10s; transform-origin: 4vw 22vh; box-shadow: 40vmin 0 5.399987351794253vmin currentColor; } .background span:nth-child(10) { color: #d77028; top: 40%; left: 83%; animation-duration: 44s; animation-delay: -41s; transform-origin: -6vw 21vh; box-shadow: 40vmin 0 5.212966979560955vmin currentColor; } .background span:nth-child(11) { color: #215c93; top: 97%; left: 86%; animation-duration: 18s; animation-delay: -11s; transform-origin: 14vw 10vh; box-shadow: 40vmin 0 5.807834567134812vmin currentColor; } .background span:nth-child(12) { color: #215c93; top: 16%; left: 57%; animation-duration: 39s; animation-delay: -4s; transform-origin: 17vw -15vh; box-shadow: -40vmin 0 5.9293932959925755vmin currentColor; } .background span:nth-child(13) { color: #215c93; top: 81%; left: 88%; animation-duration: 53s; animation-delay: -45s; transform-origin: -15vw 3vh; box-shadow: 40vmin 0 5.908375178173335vmin currentColor; } .background span:nth-child(14) { color: #215c93; top: 66%; left: 96%; animation-duration: 47s; animation-delay: -8s; transform-origin: 16vw 1vh; box-shadow: -40vmin 0 5.626428238989892vmin currentColor; } .background span:nth-child(15) { color: #215c93; top: 32%; left: 10%; animation-duration: 35s; animation-delay: -32s; transform-origin: -12vw 17vh; box-shadow: 40vmin 0 5.760767599039333vmin currentColor; } .background span:nth-child(16) { color: #d77028; top: 10%; left: 68%; animation-duration: 19s; animation-delay: -41s; transform-origin: 3vw 25vh; box-shadow: 40vmin 0 5.737975694141975vmin currentColor; } .background span:nth-child(17) { color: #d77028; top: 95%; left: 15%; animation-duration: 43s; animation-delay: -3s; transform-origin: -11vw -17vh; box-shadow: -40vmin 0 5.582846639545617vmin currentColor; } .background span:nth-child(18) { color: #215c93; top: 100%; left: 3%; animation-duration: 27s; animation-delay: -24s; transform-origin: -10vw 3vh; box-shadow: 40vmin 0 5.657476197728973vmin currentColor; } .background span:nth-child(19) { color: #d77028; top: 81%; left: 98%; animation-duration: 40s; animation-delay: -45s; transform-origin: 14vw 15vh; box-shadow: -40vmin 0 5.388022593263575vmin currentColor; }