JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Jittery (click to start/reverse)</h1>
<img class="jittery" src="https://dummyimage.com/600x400/000/fff">

<h1>Smooth (click to start/reverse)</h1>
<img class="smooth" src="https://dummyimage.com/600x400/000/fff"/></div>

CSS

img {
    -moz-transition: -moz-transform 30s linear;
}
.jittery.zoom {
    /* just scaling produces a jittery transition */
    -moz-transform: scale(2);
}
.smooth.zoom {
    /* adding any kind of rotation will make the transition smooth */
    -moz-transform: scale(2) rotate(0.01deg);
}

JavaScript

$('img').on('click', function() {
    $(this).toggleClass('zoom');
});