@-webkit-keyframes shakes {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
10%,
20% {
-webkit-transform: scale(0.9) rotate(-3deg);
-ms-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
}
30%,
50%,
70%,
90% {
-webkit-transform: scale(1.1) rotate(3deg);
-ms-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
}
40%,
60%,
80% {
-webkit-transform: scale(1.1) rotate(-3deg);
-ms-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
}
100% {
-webkit-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
}
<script type="text/javascript">
setInterval(function() {
$('.numberdddd').addClass("shakes");
if ($(".numberdddd").hasClass("shakes")) {
setTimeout(function() {
$('.numberdddd').removeClass("shakes");
}, 2000);
}
}, 3000);
</script>
.shakes {
-webkit-animation: shakes 1s 1s ease-out infinite both;
-moz-animation: shakes 1s 1s ease-out infinite both;
-o-animation: shakes 1s 1s ease-out infinite both;
animation: shakes 1s 1s ease-out infinite both;
}