<body>
  <div class="container">
    <div class="bubble-container">
      <div class="main-bubble"></div>
    </div>
  </div>
  <script src="jquery.js"></script>
  <script src="bubbles.js"></script>
</body>
body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
}

.container {
  display: flex;
  align-items: center;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}

.bubble-container {
  height: 50px;
  width: 50px;
  overflow: visible;
  margin: 0 auto;
}

.new-bubble {
  position: absolute;
  z-index: 1;
  background: rgba(0,173,239,0.4);
  height: 50px;
  width: 50px;
  border-radius: 50%;
  -webkit-animation: pop 2.5s ease-out forwards;
  -moz-animation: pop 2.5s ease-out forwards;
  animation: pop 2.5s ease-out forwards;
}

.main-bubble {
  position: absolute;
  z-index: 100;
  background: #00adef;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  cursor: pointer;
}

.scale-small {
  -webkit-animation: small 0.2s ease-out forwards;
  -moz-animation: small 0.2s ease-out forwards;
  animation: small 0.2s ease-out forwards;
}

.scale-large {
  -webkit-animation: large 0.4s ease-out forwards;
  -moz-animation: large 0.4s ease-out forwards;
  animation: large 0.4s ease-out forwards;
}

@-webkit-keyframes large {
  0% {
    -webkit-transform: scale(0.7);
  }
  33% {
    -webkit-transform: scale(1.3);
  }
  67% {
    -webkit-transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes large {
  0% {
    -moz-transform: scale(0.7);
  }
  33% {
    -moz-transform: scale(1.3);
  }
  67% {
    -moz-transform: scale(0.8);
  }
  100% {
    -moz-transform: scale(1);
  }
}

@keyframes large {
  0% {
    transform: scale(0.7);
  }
  33% {
    transform: scale(1.3);
  }
  67% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes small {
  0% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.7);
  }
}

@-moz-keyframes small {
  0% {
    -moz-transform: scale(1);
  }
  100% {
    -moz-transform: scale(0.7);
  }
}

@keyframes small {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.7);
  }
}

@-webkit-keyframes pop {
  0% {
    -webkit-transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(15);
    opacity: 0;
  }
}

@-moz-keyframes pop {
  0% {
    -moz-transform: scale(0);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(15);
    opacity: 0;
  }
}

@keyframes pop {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(15);
    opacity: 0;
  }
}

$('.main-bubble').mousedown(function(){
  $(this).removeClass('scale-large');
  $(this).addClass('scale-small');
});

$('.main-bubble').mouseup(function(){
  $(this).removeClass('scale-small');
  $(this).addClass('scale-large');
  $( '<div class="new-bubble"></div>' ).insertBefore(this);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js