JSFiddle - React, Tailwind, and code Playground

by seemly

HTML

<img src="http://f.cl.ly/items/2L433c0c233l0D1t4545/button.png" class="shake animated" />
<br>
<br>
<img src="http://f.cl.ly/items/2L433c0c233l0D1t4545/button.png" class="shake animated" />
<br>
<br>
<img src="http://f.cl.ly/items/2L433c0c233l0D1t4545/button.png" class="shake animated" />
<br>
<br>
<img src="http://f.cl.ly/items/2L433c0c233l0D1t4545/button.png" class="shake animated" />
<br>
<br>
<img src="http://f.cl.ly/items/2L433c0c233l0D1t4545/button.png" class="shake animated" />
<br>
<br>
<img src="http://f.cl.ly/items/2L433c0c233l0D1t4545/button.png" class="shake animated" />
<br>
<br>

CSS

/**/
 .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translatex(-2px);
        transform: translatex(-2px);
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
}
.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
}

JavaScript

setInterval(function () {
    $('.animated').toggleClass('shake');
}, 1000);