.bars {
    height: 56px;
    width: 81px;
    margin-left:auto;
    margin-right:auto;
    transform: rotate(180deg);
}

.bar {
    padding-top:6px;
    background: #000077;
    height: 40px;
    display:inline-block;
    width: 3px;
    animation: sound 0ms 0ms linear alternate infinite;
    animation-duration: 8000ms;
    animation-fill-mode: backwards;
    position: absolute;
}

@keyframes sound {
    0% {
        height: 3px;
        opacity: 0.25;
    }
    15% {
        height: 16px;
        opacity: 0.5;
    }
    25% {
        height: 10px;
    }
    35% {
        height: 16px;
        opacity: 0.7;
    }
    50% {
        height: 8px;
        opacity: 0.4;
    }
    70% {
        height: 18px;
    }
    85% {
        height: 14px;
    }
    100% {
        height: 28px;
        opacity: 0.6;
    }
}

.bar:nth-child(1) {
    left: 1px;
    animation-delay: 0ms;
}

.bar:nth-child(2) {
    left: 5px;
    animation-delay: 400ms;
}

.bar:nth-child(3) {
    left: 9px;
    animation-delay: 800ms;
}

.bar:nth-child(4) {
    left: 13px;
    animation-delay: 1200ms;
}

.bar:nth-child(5) {
    left: 17px;
    animation-delay: 1600ms;
}

.bar:nth-child(6) {
    left: 21px;
    animation-delay: 2000ms;
}

.bar:nth-child(7) {
    left: 25px;
    animation-delay: 2400ms;
}

.bar:nth-child(8) {
    left: 29px;
    animation-delay: 2800ms;
}

.bar:nth-child(9) {
    left: 33px;
    animation-delay: 3200ms;
}

.bar:nth-child(10) {
    left: 37px;
    animation-delay: 3600ms;
}

.bar:nth-child(11) {
    left: 41px;
    animation-delay: 4000ms;
}

.bar:nth-child(12) {
    left: 45px;
    animation-delay: 4400ms;
}

.bar:nth-child(13) {
    left: 49px;
    animation-delay: 4800ms;
}

.bar:nth-child(14) {
    left: 53px;
    animation-delay: 5200ms;
}

.bar:nth-child(15) {
    left: 57px;
    animation-delay: 5600ms;
}

.bar:nth-child(16) {
    left: 61px;
    animation-delay: 6000ms;
}

.bar:nth-child(17) {
    left: 65px;
    animation-delay: 6400ms;
}

.bar:nth-child(18) {
    left: 69px;
    animation-delay: 6800ms;
}

.bar:nth-child(19) {
    left: 73px;
    animation-delay: 7200ms;
}

.bar:nth-child(20) {
    left: 77px;
    animation-delay: 7600ms;
}