JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box"></div>
<button id="shake-the-box">Shake it!</button>

CSS

#box{
    background: blue;
    margin:30px;
    height:50px;
    width:50px;
    position:relative;
}
#box.trigger{
    display:table;
    -moz-animation:shake .2s 0 linear 1; 
    -webkit-animation:shake .2s 0 linear 1;    
    animation-name: shake;
    animation-duration: 0.2s;
    animation-timing-function:linear;
    
}
@-webkit-keyframes shake {
    0% {
        left: 0;
    }
    25% {
        left: 12px;
    }
    50% {
        left: 0;
    }
    75% {
        left: -12px;
    }
    100% {
        left:0;
    }
}
@-moz-keyframes shake {
    0% {
        left: 0;
    }
    25% {
        left: 12px;
    }
    50% {
        left: 0;
    }
    75% {
        left: -12px;
    }
    100% {
        left:0;
    }
}

JavaScript

$('#shake-the-box').click(function(){   
console.log("click");
  $('#box').removeClass("trigger");
  window.requestAnimationFrame(function(time) {
  window.requestAnimationFrame(function(time) {
      $('#box').addClass("trigger");
    });
    });    
    
});