#audio-bars {
  height: 1em;
  display: flex;
  width: 12px;
}

.audio-bar {
  background: var(--main-color);
  width: 3px;
  height: 1em;
  animation: sound 1s cubic-bezier(.17,.37,.43,.67) infinite alternate;
  will-change: opacity, transform;
  transform-origin: bottom;
}

@keyframes sound {
  0% {
    opacity: .35;
    transform: scaleY(0.1) translateZ(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1) translateZ(0);
  }
}

.audio-bar:nth-child(1) { animation-duration: 0.4s; }
.audio-bar:nth-child(2) { animation-duration: 0.2s; }
.audio-bar:nth-child(3) { animation-duration: 1.0s; }
.audio-bar:nth-child(4) { animation-duration: 0.3s; }
