JSFiddle - React, Tailwind, and code Playground

JavaScript

window.onload = function(){
    var paper = Raphael(0,0,600,600);
    
    var icon = paper.rect(100,200,100,100);
    
    var anim = Raphael.animation({
        "10%":{transform:'t100,0'}, //transform on x-axis
        "20%":{transform:'...t0,100'},//transform on y-axis
        "30%":{transform:'...t-100,0'},//transform on x-axis(negative)
        "40%":{transform:'...t0,-100'},//transform on y-axis(negative)
        "50%":{transform:'...t200,200'},//transform diagonally
        "60%":{transform:'...t-100,-100'},//transform diagonally(negative)
        "70%":{transform:'...s1,1.5'},//scale y-axis
        "80%":{transform:'...s1.5,1'},//scale x-axis
        "90%":{transform:'...s2'},//scale in both direction
        "100%":{transform:'...r45'},//rotate
    },5000);
    
    icon.animate(anim.delay(1000));
}