Animating Text

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="questions_menu_drawer">Animating Text</div>

CSS

.moz-trial {
    -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);
    }
}

JavaScript

$('#questions_menu_drawer').on('click',function(){    
   $(this).addClass('moz-trial');
});