JSFiddle - React, Tailwind, and code Playground
HTML
<div class="card"></div>
CSS
.card{width:200px;height:200px;background:blue;}
JavaScript
function AnimateRotate(angle) {
// caching the object for performance reasons
var $elem = $('.card');
// we use a pseudo object for the animation
// (starts from `0` to `angle`), you can name it as you want
$({deg: 0}).animate({deg: angle}, {
duration: 2000,
step: function(now) {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
$elem.css({
transform: 'rotate(' + now + 'deg)'
});
}
});
}
$('.card').click(function(){
AnimateRotate(180);
});