.wrap {
  position: absolute;
  width: 100px;
  height: 250px;
  left: 50%;
  margin-left: -50px;
  top: 50%;
  margin-top: -20px;
}

.drop {
  width: 58px;
  height: 58px;
  left: 50%;
  margin-left: -20px;
  position: absolute;
  animation: drop 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s infinite;
}

.drop circle {
  fill: #2a96ed;
}

.drop-outer {
  position: absolute;
  box-sizing: border-box;
  /* border: 1px solid #333; */
  width: 100px;
  height: 200px;
  overflow: hidden;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  background-clip: padding-box;
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}




@keyframes drop {
  0% {
    transform: scale3d(0.01,0.01,0.01) translateY(0)
  }
  10% {
    transform: scale3d(1,1,1) 
  }
  44% {
    transform: scale3d(1,1,1) translateY(200px)
  }
  100% {
    transform: scale3d(1,1,1) translateY(200px)
  }
}

@keyframes fade-in-out {
  0% {opacity: 0}
  42% {opacity: 0}
  52% {opacity: 1}
  65% {opacity: 1}
  100% {opacity: 0}
}

@keyframes border {
  0% { stroke-width: 6px }
  42% { stroke-width: 6px }
  100% {stroke-width: 2px }
}