JSFiddle - React, Tailwind, and code Playground

by ankur3291

HTML

<body onload="expand();fadeOut();">
    <!--check here in body tag...-->
    <div class="box" id="container"></div>
    <div id="contain">Unicorn</div>
</body>

CSS

body {
    margin:0;
}
.box {
    display:block;
    background-color:green;
}
#container {
    height:100px;
    width:100px;
    position:relative;
    top:150px;
    left:150px;
}
#contain {
    display:block;
    position:fixed;
    height:200px;
    width:200px;
    top:100px;
    left:100px;
    font-size:50px;
    text-align:center;
    line-height:200px;
    opacity:0;
    background-color:orange;
}

JavaScript

function expand() {
    var obj = document.getElementById("container");
    var h = 100
    var w = 100
    var t = 150
    var l = 150

        function frame() {
            t = t - 2;
            l = l - 1.97 * 2;
            h = h + 4;
            w = w + 1.96 * 4;

            obj.style.height = h + 'px';
            obj.style.width = w + 'px';
            obj.style.top = t + 'px';
            obj.style.left = l + 'px';

            if (t <= 5 || l <= 5) clearInterval(timer);
        }
    var timer = setInterval(frame, 4);
}

function fadeOut() {
    var obj = document.getElementById("contain");
    var o = 0;

    function frame() {
        obj.style.opacity = o;
        o = o + 0.01;
        if (o >= 1) clearInterval(timer);
    }
    var timer = setInterval(frame, 4);
}