.example-wrapper
    .arrow-example.-hidden
        .dot.-center
        .dot.-center
        .dot.-center
        .dot.-center
        .dot.-center
        .dot.-center
        .dot.-left-1
        .dot.-left-2
        .dot.-right-1
        .dot.-right-2

@use postcss-cssnext;
@use postcss-nested;

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

:root {
    --arrow-height: 150px;
    --arrow-width: calc(var(--arrow-height) * 5 / 6);
    --dot-size: calc(var(--arrow-height) / 6);
}

body {
    background: #EDF7F6;
}

.example-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.arrow-example {
    position: relative;
    height: var(--arrow-height);
    width:  var(--arrow-width);
    will-change: opacity, transform;
    transition: all .3s cubic-bezier(.43,.27,.36,.83);
    
    > .dot {
        position: absolute;
        bottom: 0;
        left: calc(var(--dot-size) * 2);
        height: var(--dot-size);
        width:  var(--dot-size);
        will-change: transform;
        transition: transform .3s cubic-bezier(.43,.27,.36,.83);
        
        &:after {
            content: '';
            position: absolute;
            top: 20%;
            left: 20%;
            display: block;
            height: 60%;
            width: 60%;
            background: #2660A4;
        }
            
        &.-center {
            &:nth-of-type(1) { bottom: 0; }
            &:nth-of-type(2) { bottom: var(--dot-size); }
            &:nth-of-type(3) { bottom: calc(var(--dot-size) * 2); }
            &:nth-of-type(4) { bottom: calc(var(--dot-size) * 3); }
            &:nth-of-type(5) { bottom: calc(var(--dot-size) * 4); }
            &:nth-of-type(6) { bottom: calc(var(--dot-size) * 5); }
        }
        
        &.-left-1 {
            bottom: calc(var(--dot-size) * 1);
            left: calc(var(--dot-size) * 1);
        }
        
        &.-left-2 {
            bottom: calc(var(--dot-size) * 2);
            left: 0;
        }
        
        &.-right-1 {
            bottom: calc(var(--dot-size) * 1);
            left: calc(var(--dot-size) * 3);
        }
        
        &.-right-2 {
            bottom: calc(var(--dot-size) * 2);
            left: calc(var(--dot-size) * 4);
        }
    }
    
    &.-hidden {
        opacity: 0;
        transform: translateY(calc(var(--dot-size) * -2));
        
        > .dot {
            &:nth-of-type(1) {
                transform:
                    translateX(calc(var(--dot-size) * 1))
                    translateY(calc(var(--dot-size) * 1));
            }
            
            &:nth-of-type(2) {
                transform:
                    translateX(calc(var(--dot-size) * -1))
                    translateY(calc(var(--dot-size) * -3));
            }
            
            &:nth-of-type(3) {
                transform:
                    translateX(calc(var(--dot-size) * -2))
                    translateY(calc(var(--dot-size) * 1));
            }
            
            &:nth-of-type(4) {
                transform:
                    translateX(calc(var(--dot-size) * 2))
                    translateY(calc(var(--dot-size) * -3));
            }
            
            &:nth-of-type(5) {
                transform:
                    translateX(calc(var(--dot-size) * -2))
                    translateY(calc(var(--dot-size) * -3));
            }
            
            &:nth-of-type(6) {
                transform:
                    translateX(calc(var(--dot-size) * 3))
                    translateY(calc(var(--dot-size) * 1));
            }
            
            &:nth-of-type(7) {
                transform:
                    translateX(calc(var(--dot-size) * -2))
                    translateY(calc(var(--dot-size) * -2));
            }
            
            &:nth-of-type(8) {
                transform:
                    translateX(calc(var(--dot-size) * 2))
                    translateY(calc(var(--dot-size) * -1));
            }
            
            &:nth-of-type(9) {
                transform:
                    translateX(calc(var(--dot-size) * 1))
                    translateY(calc(var(--dot-size) * 1));
            }
            
            &:nth-of-type(10) {
                transform:
                    translateX(calc(var(--dot-size) * -1))
                    translateY(calc(var(--dot-size) * -3));
            }
        }
    }
}

let arrow = document.querySelector('.arrow-example');

setInterval(() => {
    arrow.classList.toggle('-hidden');
}, 1000);