JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<div class="stage">
    <ul class="extras">
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
    </ul>
    <div class="item"></div>
</div>

SCSS

@-ms-keyframes wiggle{0%{-ms-transform:rotate(3deg);}50%{-ms-transform:rotate(-3deg);}100%{-ms-transform:rotate(3deg);}}
@-moz-keyframes wiggle{0%{-moz-transform:rotate(3deg);}50%{-moz-transform:rotate(-3deg);}100%{-moz-transform:rotate(3deg);}}
@-webkit-keyframes wiggle{0%{-webkit-transform:rotate(3deg);}50%{-webkit-transform:rotate(-3deg);}100%{-webkit-transform:rotate(3deg);}}
@keyframes wiggle{0%{transform:rotate(3deg);}50%{transform:rotate(-3deg);}100%{transform:rotate(3deg);}}

.stage {
    position: relative;
    height: 300px;
    border: solid 1px #000;
    .extras {
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        bottom: 15px;
        left: 0;
        width: 100%;
        text-align: center;
        li {
            display: inline-block;
            vertical-align: middle;
            span {
                border: solid 1px #CCC;
                display: block;
                width: 100px;
                height: 50px;
                -ms-animation:wiggle .5s infinite;
                -moz-animation:wiggle .5s infinite;
                -webkit-animation:wiggle .5s infinite;
                animation:wiggle .5s infinite;
            }
        }
    }
    .item {
        width: 50px;
        height: 50px;
        border: solid 1px red;
        display: block;
        position: absolute;
        left: 50%;
        top: 100%;
        margin-left: -25px;
        -ms-animation:wiggle .5s infinite;
        -moz-animation:wiggle .5s infinite;
        -webkit-animation:wiggle .5s infinite;
        animation:wiggle .5s infinite;
    }
}

JavaScript

(function($) {
    $(document).ready(function() {
        setInterval(function() {
            var left = Math.floor(Math.random() * 100) + 1;
            $('.item').css('left', left + '%').animate({
                top: '15%'
            }, 1000, '', function() {
                var me = $(this);
                setTimeout(function() {
                    me.animate({
                        top: '100%'
                    }, 1000);
                }, 100);
            });
        }, 5000);
    });
})(jQuery);