JSFiddle - React, Tailwind, and code Playground
HTML
click the div
<div id="lolbob" class="original"></div>
CSS
#lolbob {
width: 100px;
height: 100px;
}
.original {
background: rgb(200,250,200);
}
.found {
background-color: #5eb4fc;
}
JavaScript
function setTransition(id, prop, delay, style, callback) {
$(id).css({'-webkit-transition' : prop + ' ' + delay + ' ' + style});
$(id).css({'-moz-transition' : prop + ' ' + delay + ' ' + style});
$(id).css({'-o-transition' : prop + ' ' + delay + ' ' + style});
$(id).css({'transition' : prop + ' ' + delay + ' ' + style});
callback();
}
$('#lolbob').on('click', function() {
setTransition('#lolbob', 'background', '0s', 'ease', function() {
$('#lolbob').addClass('found');
});
setTimeout(function() {
setTransition('#lolbob', 'background', '2s', 'ease', function() {
$('#lolbob').removeClass('found');
});
});
});