JSFiddle - React, Tailwind, and code Playground
HTML
<div id="some-element"></div>
CSS
#some-element {
position : relative;
width : 200px;
height : 100px;
top : 50px;
left : 50px;
background : red;
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius: 12px; /* FF1-3.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
-webkit-transition : all 0.5s linear;
-moz-transition : all 0.5s linear;
-ms-transition : all 0.5s linear;
-o-transition : all 0.5s linear;
transition : all 0.5s linear;
}
#some-element.ani-state {
-webkit-box-shadow : 0 0 24px #000, inset 0 0 24px #999;
-moz-box-shadow : 0 0 24px #000, inset 0 0 24px #999;
box-shadow : 0 0 24px #000, inset 0 0 24px #999;
}
JavaScript
$(function () {
var $someElement = $('#some-element')
$someElement.window('load', function () {
$someElement.addClass('ani-state');
setTimeout(function () {
$someElement.removeClass('ani-state');
}, 500);
});
});