.dot-container
  .dot.n1
  .dot.n2
  .dot.n3
  .dot.n4
View Compiled
$colors: #3369E8, #D50F25, #EEB211, #009925;
$positions: -30px, -10px, 10px, 30px;

$wait-height: 4px;
$wait-duration: 1.3s;
$wait-delay: 0.1s;

$voice-heights: 0.8, 0.3, 1, 0.4;
$voice-height: 64px;
$voice-fluct: 6px;
$voice-sin-speed: 10;
$voice-sin-amp: 12px;
$voice-sin-delay: pi() * 0.2;
$voice-duration: 7s;
$voice-delay: 0.05s;

.dot-container {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 256px;
  height: 128px;
  padding: 128px 0 0 0;
  transform: translate(-50%, -50%);
  text-align: center;
}

.dot {
  position: absolute;
  display: block;
  width: 12px;
  height: 0;
  background: black;
  margin: 0;
  padding: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  &:before, &:after {
    content: "";
    position: absolute;
    left: 0;
    display: block;
    width: 12px;
    height: 12px;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    transform: translateY(0);
  }
  &:before {
    top: -6px;
  }
  &:after {
    bottom: -6px;
  }
  
  @for $i from 1 through 4 {
    &.n#{$i}, &.n#{$i}:before, &.n#{$i}:after {
      background: nth($colors, $i);
    }
    &.n#{$i} {
      left: calc(50% + #{nth($positions, $i)});
      animation: wait $wait-duration ease-in-out #{$wait-delay * $i} infinite;
    }
    .dot-container:hover &.n#{$i} {
      animation: voice-#{$i} $voice-duration ease-in-out #{$voice-delay * $i} infinite;
    }
  }
}

@keyframes wait {
  0% {transform: translate(-50%, 0);}
  50% {transform: translate(-50%, -$wait-height);}
  100% {transform: translate(-50%, 0);}
}

@for $i from 1 through 4 {
  @keyframes voice-#{$i} {
    @for $t from 0 through 100 {
      #{$t}% {height: $voice-height * nth($voice-heights, $i) + sin($voice-sin-delay * $i + $voice-sin-speed * 2 * pi() * -$t / 100) * $voice-sin-amp + random($voice-fluct * 2) - $voice-fluct;}
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.