JSFiddle - React, Tailwind, and code Playground
HTML
<div class="shk">Shake me</div>
CSS
.shk {
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
-webkit-animation-name: shake;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
}
@keyframes shakeMe {
10%, 90% {
transform: translate3d(-5px, 0, 0);
}
20%, 80% {
transform: translate3d(5px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-5px, 0, 0);
}
40%, 60% {
transform: translate3d(5px, 0, 0);
}
}
JavaScript
$(document).ready(function() {
setInterval(function() {
$(".shk").css("animation", "shakeMe");
}, 500);
});