JSFiddle - React, Tailwind, and code Playground

by rtempchin

HTML

<div class="square"></div>

<button>animate</button>

CSS

.square {
    position:absolute;
    top:0px;
    left:0px;
    width:50px;
    height:50px;
    background-color:#ff0000;
}

button {
    position:relative;
    top:60px;
}

JavaScript

$("button").click(animate);

function animate() {
    $(".square").stop(true, false);
    $(".square").animate(
        { left : "+=50px" },
        { duration: 1000, easing: "linear", complete:complete }
    );
}

function complete() {
    animate();
}