JSFiddle - React, Tailwind, and code Playground

by Yeah

HTML

<div id="plate" class="rotate"></div>

<div id="japan"><div id="fish" class="animate" data-delay="2500" data-callback="fish"></div></div>
<div id="alko"><div id="wine" class="animate" data-delay="2400" data-callback="wine"></div></div>
<div id="asia"><div id="oyster" class="animate" data-delay="2300" data-callback="oyster"></div></div>

CSS

#plate{width:90px; height:90px; background:#000; position:absolute; margin:80px; z-index:10;}

#japan{margin-top:95px;margin-left:95px;position: absolute;}
#alko{margin-top:95px;margin-left:95px;position: absolute;}
#asia{margin-top:95px;margin-left:95px;position: absolute;}

#fish{width:30px;height:30px;background:#454;position:absolute;z-index:1;}
#wine{width:30px;height:30px;background:#454;position:absolute;z-index:2;}
#oyster{width:30px;height:30px;background:#454;position:absolute;z-index:3;}

JavaScript

$(document).ready(function() {
    
$.fn.delay = function(time, callback){
    // Empty function:
    jQuery.fx.step.delay = function(){};
    // Return meaningless animation, (will be added to queue)
    return this.stop().animate({delay:1}, time, callback);
};
    
(function() { 
    var callbacks = {
        fish: [function() {
            $(this)
                .stop()
                .animate({left: '+=50', bottom: '+=50'}, 200);
        }, function() {
            $(this)
                .stop()
                .animate({left: '-=50', bottom: '-=50'}, 200);
            hoverInStarted = hoverOutStarted = false;
        }],
        wine: [function() {
            $(this)
                .stop()
                .animate({left: '+=80', top: '+=50'}, 200);
        }, function() {
            $(this)
                .stop()
                .animate({left: '-=80', top: '-=50'}, 200);
            hoverInStarted = hoverOutStarted = false;
        }],
        oyster: [function() {
            $(this)
                .stop()
                .animate({right: '+=50', top: '+=50'}, 200);
        }, function() {
            $(this)
                .stop()
                .animate({right: '-=50', top: '-=50'}, 200);
            hoverInStarted = hoverOutStarted = false;
        }]            
    };
    
    function callAnimateCallback(cb, index) {
        if (cb && callbacks.hasOwnProperty(cb) && callbacks[cb].length && typeof callbacks[cb][index] == 'function') {
            callbacks[cb][index].call(this);
        }
    }
    
    var hoverInStarted = hoverOutStarted = false;                    
    $('#plate').hover(
        function(){ 
            if (hoverInStarted) return true;
            hoverInStarted = true;
            $('.animate').each(function () {
                var cb = $(this).data('callback') || this.id;
                callAnimateCallback.call(this, cb, 0);
            });
                
        }, 
        function(){
            if...