<style type="text/css">
.css_test {
background-color : black;
background-image : url('//superkts.com/img/css/ghost.gif');
background-position : 50% 50%;
background-repeat : no-repeat;
background-size : 0;
border-radius : 30px;
cursor : pointer;
height : 700px;
}
.css_test.red_on {
box-shadow : 0 0 50px red inset, 0 0 15px red inset;
}
</style>
<script type="text/javascript">
function j_test(){
$( '.css_test:not(:animated)' ).addClass( 'red_on' ).animate({ 'background-size' : '+=100%' }, 600, function(){
$( '.css_test' ).animate({ 'background-size' : '-=100%' }, 10000, function(){
$(this).removeClass( 'red_on' );
});
});
}
</script>
<div class="css_test"
onclick="j_test()"></div>