マテリアルデザインの動きをjQueryのみでやる

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style>
.container {
    background: #224;
    overflow: hidden;
    width: 400px;
    height: 400px;
    padding: 10px 0 0 10px;
}

#first {
  background-color: #e6005c;
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  
}
#first.anim {
  animation: first 0.4s linear forwards;
}
#first.shrink {
  animation: first__shrink 0.3s ease forwards;
}

#second {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transform: scale(0);
  background-color: white;
  top: -50px;
  z-index: 100;
}
#second.anim {
  animation: second 0.2s linear forwards;
}
#second.shrink {
  animation: second__shrink 0.2s linear forwards;
}

@-webkit-keyframes first {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(50);
    transform: scale(50);
  }
}
@-webkit-keyframes first__shrink {
  from {
    -webkit-transform: scale(50);
    transform: scale(50);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes second {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes second__shrink {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}
</style>
<div class="container">
    <div id="first"></div>
    <div id="second"></div>
</div>

<script>
$(function() {
    var $first = $('#first');
    var $second = $('#second');
    $first.on('mousedown', function(e) {
        $first.removeClass('shrink');
        $second.removeClass('shrink');
      
        $first.addClass('anim');
        $second.addClass('anim');
    });
    $second.on('mousedown', function(e) {
      $first.removeClass('anim');
      $second.removeClass('anim');
      
      $first.addClass('shrink');
      $second.addClass('shrink');
    });

});
</script>