JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<h1>Animation</h1>
<button>Start Animation</button>
<div class="test"></div>

CSS

div {
    background:#98bf21;
    height:100px;
    width:100px;
    position:absolute;
}

JavaScript

$(document).ready(function () {
    $("button").click(function () {
        $("div").animate({
            left: '+=250px',
            opacity: '0.5',
            height: '+=150px',
            width: '150px'
        },'slow').delay(2000);
        $("div").animate({
            left: '-=250px',
            opacity: '1',
            height: '-=150px',
            width: '150px'
        },'slow');
    });
});