JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  
  <div class="main-logo">
    <div class="logo-box">
      <div class="draw"></div>
      <div class="draw2"></div>
    </div>   
  </div>

<script id="rendered-js">

$(".draw, .draw2, .logo-box").on('animationend webkitAnimationEnd', function() {
$(this).addClass("done");
if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
$(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
}
});

$(".main-logo").mouseenter(function() {
$(".draw, .draw2, .logo-box").addClass("anim");
});
</script>

</body>

CSS

body {
  width:100%;
  background:#FFF;
}

.main-logo {
  float:left;
  margin:0 30%;
  display: block;
}

.logo-box {
  background:#000;
  width:200px;
  height:200px;
  float:left;
  transition: all .25s ease;
  transform:scale(1);
}

.logo-box.anim {
  transform:scale(1.07) translate(-3px, 3px);
  transition: all .15s cubic-bezier(1.000, 0.000, 0.000, 1.000);
}

.draw {
  background:#d7cf00;
  width:50px;
  height:50px;
}

.draw.anim {
  animation: animate 1.5s ease-in;
  animation-fill-mode: forwards;
}

.draw2 {
  background:#db0a28;
  width:50px;
  height:50px;
}

.draw2.anim {
  animation: animate 1.5s ease-in;
  animation-fill-mode: forwards;
}

@keyframes animate {
  0% {transform:scale(0.5)}
  20% {transform:scale(0.3)}
  60% {transform:scale(1.2)
  100% {transform:scale(1)}
}