JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent {
  background-color: #f00;
  width: 50px;
  height: 50px;
  padding: 25px;
}

.parent:hover {
  -webkit-animation: grow 3s ease;
  -webkit-animation-fill-mode: forwards;
}

.child {
  background-color: #000;
  width: 50px;
  height: 50px;
}


@-webkit-keyframes grow {
    0% {
        padding: 25px;
    }
    100% {
        padding: 25px 100px 100px 25px;
    }
}

JavaScript

$(".child").hover(function(){
$(this).parent().css("-webkit-animation-play-state", "paused");
},
  function(){
  $(this).parent().css("-webkit-animation-play-state", "running");
})