JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test"> </div>

CSS

#test {
    width: 100px;
    height:100px;
    background-color: #FF0000;
    position: absolute;
}

JavaScript

var translatedX = 0;
var translatedY = 0;
var step = 0;
var square;



function animate(currentStep) {
    if (currentStep) {
        var speed = currentStep * 50,
            dist = currentStep * 10;

        translatedX += dist;
        translatedY += dist;

        square.setAttribute('style', '-webkit-transition: ' + speed + 'ms; -webkit-transform: translate(' + translatedX + 'px, ' + translatedY + 'px) scale(1, 1);');

        currentStep--;
        step = currentStep;

        setTimeout(function() {
            animate(step);
        }, speed);
    }
                   }
                   
square = document.getElementById('test');
animate(8);