JSFiddle - React, Tailwind, and code Playground

by eprouver

CSS

.yaypet {
    height: 10em;
    width: 10em;
    background: url(http://placehold.it/350x350) center center no-repeat;
    background-size: contain;
    position: fixed;
    bottom: -10em;
}

JavaScript

[1,2,3,4].forEach(function(){
    var pet = $('<div class="yaypet"></div>');

$('body').append(pet);

setTimeout(function () {
    var height = 0.3 + Math.random();
    var flip = Math.random() > 0.5;
    var dir = Math.random() > 0.5? 1: -1;
    pet.css({
        transition: 'transform '+height * 800 +'ms ease-out',
        'transform': 'translate3d(0px, ' + -height * 100 + 'vh, 0)' + (flip? '': ' rotate('+90 * dir+'deg)'),
        left: Math.random() * window.innerWidth
    })
      .one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd ', function(){
        $(this).css({
            transition: 'transform '+height * 800 +'ms ease-in',
            transform: flip? 'none': 'rotate('+180 * dir+'deg)'
        }).one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd ', function(){
            $(this).remove();
        })
    }) 
}, 100);
    
})