JSFiddle - React, Tailwind, and code Playground

HTML

<div id='open_drawer'>Open</div>
<div class='hidden' id='questions_menu_drawer'>SOme text</div>

CSS

.moz-trials {
    -webkit-animation-duration:1s;
    -webkit-animation-name: moz-trial;
    animation-name: moz-trial;
    animation-duration: 2s;
}
@-webkit-keyframes moz-trial {
    0% {
        opacity: 0;
        transform: translateX(-20px);
        -webkit-transform: translateX(-20px);
    }
    50% {
        opacity: 0.8;
        transform: translateX(+20px);
        -webkit-transform: translateX(+20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
    }
}
@keyframes moz-trial {
    0% {
        opacity: 0;
        -moz-transform: translateX(-20px);
        transform: translateX(-20px);
    }
    50% {
        opacity: 0.8;
        -moz-transform: translateX(+20px);
        transform: translateX(+20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0px);
        transform: translateX(0px);
    }
}
.hidden {
    visibility: hidden;
}

JavaScript

$('#open_drawer').on('click', function () {
    $('#questions_menu_drawer').removeClass('hidden').addClass('moz-trials');
});