@keyframes cube {
    from {
        transform: scale(0) rotate(0deg) translate(-50%, -50%);
        opacity: .8;
    }
    to {
        transform: scale(5) rotate(960deg) translate(-50%, -50%);
        opacity: 0;
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: #fcfcfc;
    overflow: hidden;
    z-index: -1;
}
.background span {
    position: absolute;
    top: 80vh;
    left: 45vw;
    width: 50px;
    height: 50px;
    border: solid 2px #e2e2e2;
    color: transparent;
    transform-origin: top left;
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    animation: cube 14s ease-in forwards infinite;
}

li:nth-child(odd) {
    border-color: #eeeeee;
}
li:nth-child(even) {
    border-color: #dddddd;
}

.background span:nth-child(0) {
    animation-delay: -14s;
    left: 32vw;
    top: 67vh;
    border-color: #dddddd;
}

.background span:nth-child(1) {
    animation-delay: -12s;
    left: 66vw;
    top: 8vh;
}

.background span:nth-child(2) {
    animation-delay: -10s;
    left: 90vw;
    top: 21vh;
    border-color: #dddddd;
}

.background span:nth-child(3) {
    animation-delay: -8s;
    left: 55vw;
    top: 83vh;
}

.background span:nth-child(4) {
    animation-delay: -6s;
    left: 43vw;
    top: 48vh;
}

.background span:nth-child(5) {
    animation-delay: -4s;
    left: 61vw;
    top: 73vh;
    border-color: #dddddd;
}

.background span:nth-child(6) {
    animation-delay: -2s;
    left: 3vw;
    top: 29vh;
}

.background span:nth-child(7) {
    animation-delay: 0s;
    left: 72vw;
    top: 94vh;
    border-color: #dddddd;
}

.background span:nth-child(8) {
    animation-delay: 2s;
    left: 76vw;
    top: 33vh;
}

.background span:nth-child(9) {
    animation-delay: 4s;
    left: 13vw;
    top: 97vh;
    border-color: #dddddd;
}

.background span:nth-child(10) {
    animation-delay: 6s;
    left: 29vw;
    top: 64vh;
    border-color: #dddddd;
}

.background span:nth-child(11) {
    animation-delay: 8s;
    left: 49vw;
    top: 10vh;
}

.background span:nth-child(12) {
    animation-delay: 10s;
    left: 15vw;
    top: 40vh;
    border-color: #dddddd;
}

.background span:nth-child(13) {
    animation-delay: 12s;
    left: 6vw;
    top: 37vh;
    border-color: #dddddd;
}

.background span:nth-child(14) {
    animation-delay: 14s;
    left: 52vw;
    top: 0vh;
}

.background span:nth-child(15) {
    animation-delay: 16s;
    left: 23vw;
    top: 53vh;
    border-color: #dddddd;
}

.background span:nth-child(16) {
    animation-delay: 18s;
    left: 82vw;
    top: 79vh;
    border-color: #dddddd;
}

.background span:nth-child(17) {
    animation-delay: 20s;
    left: 38vw;
    top: 86vh;
    border-color: #dddddd;
}

.background span:nth-child(18) {
    animation-delay: 22s;
    left: 95vw;
    top: 15vh;
}

.background span:nth-child(19) {
    animation-delay: 24s;
    left: 87vw;
    top: 57vh;
}