.bubbles {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bubble {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid rgb(240, 185, 11);
  border: 1px solid rgba(240, 185, 11, 0.5);
  background: #fff;
  background: rgba(240, 185, 11, 0.25);
  will-change: transform;
  transition: 2s;
}
.bubbleHover {
  transform: scale(2);
  background: red;
}
.minDistance {
  background: darkorange;
}
.maxDistance {
  background: yellow;
}
.bubble-container {
  position: absolute;
  bottom: 0;
  animation: bubbleRise 10s infinite ease-in;
  will-change: transform;
}
@keyframes bubbleRise {
  0% {
    opacity: 0;
    bottom: 0;
  }
  15% {
    bottom: 0;
    opacity: 0.1;
    margin-left: 0;
  }
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
    margin-left: 5px;
  }
  100% {
    bottom: 100%;
    opacity: 0;
  }
}