.tunnel-wrapper
    .infinite-tunnel
        .infinite-wall
            .wall
                .block
                .block
                .block
                .block
                .block
                .block
        .infinite-wall
            .wall
                .block
                .block
                .block
                .block
                .block
                .block
        .infinite-wall
            .wall
                .block
                .block
                .block
                .block
                .block
                .block
        .infinite-wall
            .wall
                .block
                .block
                .block
                .block
                .block
                .block

@tunnel-size: 50vh;
@block-size: @tunnel-size;
@animation-duration: 6s;
@color1: #000000;
@color2: #FFFFFF;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: @color1;
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

.tunnel-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    height: @tunnel-size;
    width: @tunnel-size;
    margin-top: -(@tunnel-size/2);
    margin-left: -(@tunnel-size/2);
    overflow: hidden;
    border-radius: 50%;
}

.infinite-tunnel {
    position: relative;
    height: @tunnel-size;
    width: @tunnel-size;
    transform: rotate(0);
    animation: rotate @animation-duration linear infinite;
    backface-visibility: hidden;
}

@keyframes move-block {
    from {
        transform: translateX(0);
        background: @color1;
    }
    to {
        transform: translateX(-@block-size * 6);
        background: @color2;
    }
}

.infinite-wall {
    position: absolute;
    height: @tunnel-size;
    width: @tunnel-size;

    &:nth-of-type(2) {
        transform: rotate(90deg);
    }
    &:nth-of-type(3) {
        transform: rotate(180deg);
    }
    &:nth-of-type(4) {
        transform: rotate(270deg);
    }

    > .wall {
        height: @block-size;
        width: @block-size * 6;
        position: absolute;

        &:nth-of-type(1) {
            left: 0;
            top: 0;
            transform: perspective(@tunnel-size / 2) rotateY(45deg);
            transform-origin: left;
        }

        &:nth-of-type(2) {
            top: 0;
            right: 0;
            transform: perspective(@tunnel-size / 2) rotateY(-45deg);
            transform-origin: right;
        }
    }

    > .wall > .block {
        height: @block-size;
        width: @block-size;
        border: @color1 (@block-size / 10) solid;
        background: @color2;
        position: absolute;
        top: 0;
        right: 0;
        animation: move-block @animation-duration linear infinite;
        backface-visibility: hidden;

        &:nth-of-type(1) {
            animation-delay: 0;
        }
        
        &:nth-of-type(2) {
            animation-delay: -@animation-duration * 1/6;
        }
        
        &:nth-of-type(3) {
            animation-delay: -@animation-duration * 2/6;
        }
        
        &:nth-of-type(4) {
            animation-delay: -@animation-duration * 3/6;
        }
        
        &:nth-of-type(5) {
            animation-delay: -@animation-duration * 4/6;
        }
        
        &:nth-of-type(6) {
            animation-delay: -@animation-duration * 5/6;
        }
    }
}