JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<div id="result"></div>

CSS

#result {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    opacity: 0;
    border-radius: 50px;
    margin: 150px auto;
    background-color: #fff;
    transition: background-color 2.5s ease, border-radius 1s ease, margin-top 5s linear;
}

.done {
    background-color: #070!important;
    border-bottom: 0px;
    border-radius: 150px 150px 0px 0px!important; 
    margin-top: 0px!important;
}

JavaScript

function gitIt() {
    var def = new $.Deferred();
    def.notify('sup')
    $('#result').delay(1000).animate({
        width: '100px',
        height: '100px',
        opacity: 1
    }, 1000, function () {
        def.resolve('animation 1 done!');
    });
    return def.promise();
}


$.when(gitIt()).then(function (msg) {

    $('#result').css({
        'background-color': '#c00',
            'border-color': '#c00'
    });
    $('#result').animate({
        width: '300px',
        height: '300px',
        opacity: 1,
            'border-radius': '150px'

    }, 500, function () {
        
        console.log(msg)
        $(this).addClass('done')
    });

    
}, function () {}, function (msg) {
    console.log('notify:', msg);
});