JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container"> 

  <h2>CSS3 Keyframe animations on click (with Bounce.js)</h2>
  <button class="animate">Animate</button>
  
  <div class="box">
    <ul>
      <li>Settings</li>
      <li>Profile</li>
      <li>Logout</li>
      <li>Posts</li>
    </ul>
  </div>
 
</div>

CSS

.box{
  background:green;
  opacity:0.6;
  padding: 20px 40px;
  display:inline-block;
  border-radius:5px;
  top:23%;
  position: absolute;
  left:-200px;
  background-color:gray;
}

.box.show{
  -webkit-animation: animation 700ms linear both;
  animation: animation 700ms linear both;
}

.box.hide{
   -webkit-animation: animation 700ms linear both;
  animation: animation 700ms linear both;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

ul{
  list-style:none;
  padding: 0;
  margin: 0;
}

ul li {
  padding: 10px;
  text-transform: uppercase;
  
}

.animation-target {
  -webkit-animation: animation 1000ms linear infinite both;
  animation: animation 1000ms linear infinite both;
}

/* Generated with Bounce.js. Edit at http://goo.gl/tWssQw */

@-webkit-keyframes animation { 
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  5.31% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 112.525, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 112.525, 0, 0, 1); }
  10.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 177.578, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 177.578, 0, 0, 1); }
  15.82% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 204.879, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 204.879, 0, 0, 1); }
  21.02% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 210.428, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 210.428, 0, 0, 1); }
  35.34% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 201.989, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 201.989, 0, 0, 1); }
  49.55% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 199.679, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 199.679, 0, 0, 1); }
 ...

JavaScript

var button = $('.animate');
var settingPopup = $('.box');

button.on('click',function(e){
	
  if(settingPopup.hasClass('show')){
  		settingPopup.removeClass('show');
      //line below is a fix to restart css3 keyframe animation
      //settingPopup.outerWidth(settingPopup.outerWidth)
      settingPopup.outerWidth(settingPopup.outerWidth).addClass('hide');
  }else{
  		settingPopup.removeClass('hide');
      //line below is a fix to restart css3 keyframe animation
      //settingPopup.outerWidth(settingPopup.outerWidth)
      settingPopup.outerWidth(settingPopup.outerWidth).addClass('show');
  }
  
});

//Vanilia JS version:

/*
element = document.querySelector("button");
element2 = document.querySelector(".box");

// reset the transition by...
element.addEventListener("click", function(e) {
	e.stopPropagation();
  e.preventDefault;
  console.log(element2.classList.contains('show'));
  
  if (element2.classList.contains('show')) {
      element2.classList.remove("show");
      //restarting css3 keyframe animation
      element2.offsetWidth = element2.offsetWidth;
      element2.classList.add("hide");
  }else{
  		element2.classList.remove("hide");
      //restarting css3 keyframe animation
      element2.offsetWidth = element2.offsetWidth;
      element2.classList.add("show");
  }
}, false);
*/