JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<style>
.sprite {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
}

.scene {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.scene-world {
    background-color: green;
}

.static-crab {
    width: 50px;
    height: 50px;
}
.sprite-bg, .sprite-mg, .sprite-fg {
    position: absolute;
    position: top: 0; left: 0;
    width: 100%;
    height: 100%;
}
.sprite-bg {
    background-color: red;
}
.static-crab .sprite-bg {
    -webkit-transition: box-shadow,background-color 0.8s,0.8s ease;
    -moz-transition: -moz-box-shadow,background-color 0.8s,0.8s ease;

    background-color: transparent;
    width: 50px;
    height: 50px;
    background-color: transparent;

    box-shadow:    0 0 1px #0ff;
    -moz-box-shadow:     0 0 1px #0ff;
    box-shadow:            0 0 1px #0ff;
    
    -webkit-border-radius:     25px;
    border-radius:             25px; 
    -moz-border-radius:     25px;
}
.static-crab .gothit {
    -webkit-transition: box-shadow,background-color 0.2s,0.2s ease;
    -moz-transition: -moz-box-shadow,background-color 0.2s,0.2s ease;

    box-shadow:    0 0 25px #0ff;
    -moz-box-shadow:     0 0 25px #0ff;
    box-shadow:            0 0 25px #0ff;

    background-color: #0ff;
}
</style>

<div id="playarea" style="height: 300px; margin-right:10px;">
    <div class="scene scene-world" style="position: relative; width: 640px; height: 480px; ">
        <div class="sprite static-crab" id="crab" style="left: 45px; top: 86px;">
            <div class="sprite-bg" style=""></div>
            <div class="sprite-mg" style="display:none;"></div>
            <div class="sprite-fg"></div>
        </div>
    </div>
</div>

JavaScript

var node = $("#crab .sprite-bg")
    
setTimeout(function(){
    node.addClass('gothit');
    setTimeout(function(){
        node.removeClass('gothit');
    }, 2000);
}, 1000);