<div class="container">
  <div class="dot-arrow anim8"></div>
</div>

.container { font-size:1.2em; width:6em; height:4em; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; cursor:pointer;}
.anim8 { transition:all 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
.dot-arrow { position:absolute; top:0; left:0; right:0; bottom:100%; margin:auto; background-color:red; width:2em; height:2em; border-radius:50%; }
.dot-arrow:after, .dot-arrow:before { content:" "; background-color:inherit; width:2em; height:2em; border-radius:50%; position: absolute; transition:all 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
.dot-arrow:before { left: 100%; top:100%; }
.dot-arrow:after { right: 100%; top:100%; }
.dot-arrow.active { bottom:0%; }
.dot-arrow.active:after { top:-100%; animation:right-wobble 0.35s; } 
.dot-arrow.active:before { top:-100%; animation:left-wobble 0.35s; } 
.dot-arrow.reverse:before { top:100%; animation:left-wobble-2 0.35s; }
.dot-arrow.reverse:after { top:100%; animation:right-wobble-2 0.35s; }

@keyframes left-wobble {
  0%   { left:100%; }
  50%  { left:140%; }
  100% { left:100%; }
}

@keyframes right-wobble {
  0%   { right:100%; }
  50%  { right:140%; }
  100% { right:100%; }
}

@keyframes left-wobble-2 {
  0%   { left:100%; }
  50%  { left:140%; }
  100% { left:100%; }
}

@keyframes right-wobble-2 {
  0%   { right:100%; }
  50%  { right:140%; }
  100% { right:100%; }
}

$('.container').click(function(){
  if( $('.dot-arrow').hasClass('active') ){
    $('.dot-arrow').addClass('reverse');
    $('.dot-arrow').removeClass('active');
  }else{
    $('.dot-arrow').removeClass('reverse');
    $('.dot-arrow').addClass('active');
  }
});