<div class="glass-wrapper">
  <div id="glass" class="glass">
    <div class="soda-pop">
      <div class="bubble bubble-1"></div>
      <div class="bubble bubble-2"></div>
      <div class="bubble bubble-3"></div>
      <div class="bubble bubble-4"></div>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  background: -webkit-radial-gradient(ellipse at 69% 50%, #2d2d39 15%,#1b1920 70%);
  background: -o-radial-gradient(ellipse at 69% 50%, #2d2d39 15%,#1b1920 70%);
  background: -moz-radial-gradient(ellipse at 69% 50%, #2d2d39 15%,#1b1920 70%);
  background-image: radial-gradient(ellipse at 69% 50%, #2d2d39 15%,#1b1920 70%);
}

.glass-wrapper {
  perspective: 310px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  height: 180px;
  width: 93px;
  transform: scale(1.1);
  .glass {
    border: 4px solid #fafafa;
    border-bottom-width: 15px;
    border-radius: 4px;
    height: 180px;
    width: 93px;
    transform: rotateX(-32deg);
    box-shadow: 0px 3px 96px 11px rgba(255, 255, 255, 0.3), 2px 2px 39px 1px rgba(255, 255, 255, 0.3) inset;
    .soda-pop {
      background: #a9527a;
      border-top: 6px solid #b4648a;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      height: 80%;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      box-shadow: 0px 2px 29px 13px rgba(169, 82, 122, 0.4);
      .bubble {
        height: 20px;
        width: 20px;
        border: 2px solid #fff;
        opacity: .4;
        border-radius: 50%;
        position: absolute;
        opacity: 0;
        filter: blur(1px);
        &.bubble-1 {
          left: 20px;
          -webkit-animation: bubbles-up 3s infinite;
          -moz-animation:    bubbles-up 3s infinite;
          -o-animation:      bubbles-up 3s infinite;
          animation:         bubbles-up 3s infinite;
          animation-timing-function: ease;
        } 
        &.bubble-2 {
          left: 17px;
          -webkit-animation: bubbles-up 3s infinite;
          -moz-animation:    bubbles-up 3s infinite;
          -o-animation:      bubbles-up 3s infinite;
          animation:         bubbles-up 3s infinite;
          animation-timing-function: ease-out;
          animation-delay: 1s;
        } 
        &.bubble-3 {
          left: 40px;
          -webkit-animation: bubbles-up 3s infinite;
          -moz-animation:    bubbles-up 3s infinite;
          -o-animation:      bubbles-up 3s infinite;
          animation:         bubbles-up 3s infinite;
          animation-timing-function: ease-in;
          animation-delay: 1.8s;
        } 
        &.bubble-4 {
          left: 55px;
          -webkit-animation: bubbles-up 3s infinite;
          -moz-animation:    bubbles-up 3s infinite;
          -o-animation:      bubbles-up 3s infinite;
          animation:         bubbles-up 3s infinite;
          animation-timing-function: linear;
          animation-delay: 3s;
        } 
      }
    }
  } 
}

@-webkit-keyframes bubbles-up {
  0%   { 
    height: 2px;
    width: 2px;
    border-width: 1px;
    bottom: 15px;
    opacity: .6; 
  }
  100% { 
    height: 20px;
    width: 20px;
    border-width: 4px;
    bottom: 110px;
    opacity: 0; 
  }
}
@-moz-keyframes bubbles-up {
  0%   { 
    height: 2px;
    width: 2px;
    border-width: 1px;
    bottom: 15px;
    opacity: .6; 
  }
  100% { 
    height: 20px;
    width: 20px;
    border-width: 4px;
    bottom: 110px;
    opacity: 0; 
  }
}
@-o-keyframes bubbles-up {
  0%   { 
    height: 2px;
    width: 2px;
    border-width: 1px;
    bottom: 15px;
    opacity: .6; 
  }
  100% { 
    height: 20px;
    width: 20px;
    border-width: 4px;
    bottom: 110px;
    opacity: 0; 
  }
}
@keyframes bubbles-up {
  0%   { 
    height: 2px;
    width: 2px;
    border-width: 1px;
    bottom: 15px;
    opacity: .6; 
  }
  100% { 
    height: 20px;
    width: 20px;
    border-width: 4px;
    bottom: 110px;
    opacity: 0; 
  }
}