JSFiddle - React, Tailwind, and code Playground

by pimvdb

HTML

<button>Start Animation</button>
<div></div>

CSS

div {
    width:  200px;
    height: 200px;
    border-width: 50px 50px 50px 50px;
    border-color: blue green red yellow;
    border-style: solid;   
}

JavaScript

var easings = [
        ['border-top-width', '0px'],
        ['width', '0px'],
        ['height', '0px'],
        ['border-left-color', 'transparent'],
        ['border-right-color', 'transparent']
    ],
    counter = 0,
    $elem   = $('div');


function animateNext() {
    var obj = {},
        current = easings[counter];
    obj[current[0]] = current[1];
    
    counter++;
    
    $elem.animate(obj, 1000, animateNext);
}

$('button').one('click', animateNext);