JSFiddle - React, Tailwind, and code Playground

HTML

<div id="roll">
    <h1>click me</h1>
</div>

CSS

@-webkit-keyframes roll {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}

@-moz-keyframes roll {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}

@keyframes roll {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}

JavaScript

$('#roll').on('click', function() {
    $('body').css({
        "-moz-animation-name": "roll",
        "-moz-animation-duration": "4s",
        "-moz-animation-iteration-count": "1",
        "-webkit-animation-name": "roll",
        "-webkit-animation-duration": "4s",
        "-webkit-animation-iteration-count": "1"
    });
});