JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<div class="element">
    <p>It needs to shake!</p>
    <button>Shake</button>
</div>

CSS

html, body {
    margin:0;
    height:100%;
    width:100%;
    background-color:#eee;
}
.element {
    background-color:#fff;
    max-width:300px;
    height:100px;
    margin:10px auto 0 auto;
    padding:15px;
    text-align:center;
}
.element.shake {
    -webkit-animation: shake .7s 1;
    -moz-animation: shake .7s 1;
    -o-animation: shake .7s 1;
    animation: shake .7s 1;
}

JavaScript

$(function () {
    $('button').click(function () {
        el = $('.element');
        el.addClass('shake');
        el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
        function (e) {
            el.removeClass('shake');
        });
    });
});