JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 100px; height: 100px; background: green;">

    <div class="nav-bnt">
        <div></div>
        <div></div>
        <div></div>
   </div>
    
</div>

CSS

.nav-bnt div, .nav-bnt div:nth-of-type(3) {
	top: -15px; bottom: 0;
	left: 0; right: 0;
	margin: auto;

	-moz-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
	-webkit-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
	-o-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
	-ms-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
	transform: translate3d(-1px, 0px, 0px) rotate(0deg);
}

.nav-bnt div:nth-of-type(2) {
	top: 0;
	-moz-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
	-webkit-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
	-o-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
	-ms-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
	transform: translate3d(-1px, 0px, 0px) rotate(0deg);
}

.nav-bnt div:nth-of-type(3) {
	top: 0;
	bottom: -16px;
}


.animation div:nth-of-type(2) {
	-webkit-animation: navanimateleft .5s;
	-moz-animation: navanimateleft .5s;
	-o-animation: navanimateleft .5s;
	-ms-animation: navanimateleft .5s;	
	animation: navanimateleft .5s;	
}

.animation div:nth-of-type(1), .animation div:nth-of-type(3) {

    -webkit-animation: navanimateright .5s;
    -moz-animation: navanimateright .5s;
    -ms-animation: navanimateright .5s;
    -o-animation: navanimateright .5s;
    animation: navanimateright .5s;
	
}

@-webkit-keyframes navanimateleft {
	0%		{-webkit-transform: translate3d(-1px, 0px, 0px) rotate(0deg);}
	30%		{-webkit-transform: translate3d(-10px, 0px, 0px) rotate(0deg);}
	60%		{-webkit-transform: translate3d(-10px, 0px, 0px) rotate(180deg);}
	100%	{-webkit-transform: translate3d(-1px, 0px, 0px) rotate(180deg);}  
}

@keyframes navanimateleft {
	0%		{transform: translate3d(-1px, 0px, 0px) rotate(0deg);}
	30%		{transform: translate3d(-10px, 0px, 0px) rotate(0deg);}
	60%		{transform: translate3d(-10px, 0px, 0px) rotate(180deg);}
	100%	{transform: translate3d(-1px, 0px, 0px) rotate(180deg);}  
}


@-webkit-keyframes navanimateright {
	0%		{-webkit-transform: translate3d(-1px, 0px, 0px)...

JavaScript

$('.nav-bnt').bind('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    $('.nav-bnt').removeClass("animation");
});

$('.nav-bnt').hover(function(){
  $('.nav-bnt').addClass("animation");        
})