soundwaves.css

.soundwaves {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
}

.soundwave {
    margin: 10px;
    width: 20px;
    height: 30%;
    border-radius: 10px;
}

.soundwave:nth-child(1n) {
    background: #fecf6a;
}

.soundwave:nth-child(2n) {
    background: #6afecf;
}

.soundwave:nth-child(3n) {
    background: #6acffe;
}

.soundwave:nth-child(4n) {
    background: #cf6afe;
}

.soundwave:nth-child(6n+1) {
    animation: undulate4 2.5s linear infinite;
}

.soundwave:nth-child(6n+2) {
    animation: undulate3 2.5s linear infinite;
}

.soundwave:nth-child(6n+3) {
    animation: undulate2 2.5s linear 0.25s infinite;
}

.soundwave:nth-child(6n+4) {
    animation: undulate1 2.5s linear 0.5s infinite;
}

.soundwave:nth-child(6n+5) {
    animation: undulate2 2.5s linear 0.75s infinite;
}

.soundwave:nth-child(6n+6) {
    animation: undulate3 2.5s linear 1s infinite;
}

@keyframes undulate1 {
    10% { height: 30%; }
    30% { height: 60%; }
    70% { height: 70%; }
    100% { height: 30%; }
}

@keyframes undulate2 {
    10% { height: 30%; }
    30% { height: 40%; }
    70% { height: 80%; }
    100% { height: 30%; }
}

@keyframes undulate3 {
    10% { height: 30%; }
    30% { height: 40%; }
    70% { height: 60%; }
    100% { height: 30%; }
}

@keyframes undulate4 {
    10% { height: 30%; }
    25% { height: 35%; }
    50% { height: 38%; }
    75% { height: 35%; }
    100% { height: 30%; }
}