*{
    background-color: black;
}

.flexbox{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 220px;
    left: 495px;
}

.a1,.a2,.a3,.a4,.a5,.a6,.a7,.a8,.a9,.a10,.a11,.a12{
    background-color: white;
    width: 30px;
    height: 200px;
    border: 5px solid;
}

.a1{
    animation: a1 0.8s linear 0s infinite;
}

@keyframes a1{
    0%{height: 150px;}
    50%{height: 25px;}
    100%{height: 150px;}
}

.a2{
    animation: a2 1.1s linear 0.2s infinite;
}

@keyframes a2{
    0%{height: 200px;}
    50%{height: 25px;}
    100%{height: 200px;}
}

.a3{
    animation: a3 1.0s linear 0.4s infinite;
}

@keyframes a3{
    0%{height: 150px;}
    50%{height: 50px;}
    100%{height: 150px;}
}

.a4{
    animation: a4 1.5s linear 0.8s infinite;
}

@keyframes a4{
    0%{height: 200px;}
    50%{height: 65px;}
    100%{height: 200px;}
}

.a5{
    animation: a5 0.8s linear 0.8s infinite;
}

@keyframes a5{
    0%{height: 200px;}
    50%{height: 65px;}
    100%{height: 200px;}
}

.a6{
    animation: a6 1.5s linear 0s infinite;
}

@keyframes a6{
    0%{height: 200px;}
    50%{height: 100px;}
    100%{height: 200px;}
}

.a7{
    animation: a7 1.5s linear 0.6s infinite;
}

@keyframes a7{
    0%{height: 200px;}
    50%{height: 75px;}
    100%{height: 200px;}
}

.a8{
    animation: a8 1s linear 0.5s infinite;
}

@keyframes a8{
    0%{height: 200px;}
    50%{height: 85px;}
    100%{height: 200px;}
}

.a9{
    animation: a9 2s linear 0s infinite;
}

@keyframes a9{
    0%{height: 200px;}
    50%{height: 45px;}
    100%{height: 200px;}
}

.a10{
    animation: a10 1.5s linear 0.4s infinite;
}

@keyframes a10{
    0%{height: 150px;}
    50%{height: 25px;}
    100%{height: 150px;}
}

.a11{
    animation: a11 1.5s linear 0.7s infinite;
}

@keyframes a11{
    0%{height: 200px;}
    50%{height: 25px;}
    100%{height: 200px;}
}

.a12{
    animation: a12 1.5s linear 0.1s infinite;
}

@keyframes a12{
    0%{height: 150px;}
    50%{height: 25px;}
    100%{height: 150px;}
}