SOURCE

   function $_(name) {
                return document.querySelector(name);
            }
            function getStyle(obj, attr) {
                return getComputedStyle(obj)[attr];
            }
            function animate(obj, json, fn) {
                clearInterval(obj.timer);
                obj.timer = setInterval(function () {
                    var bstop = true;
                    for (var key in json) {
                        var icur;
                        if (key == "opacity") {
                            icur = Math.round(getComputedStyle(obj)[key] * 100);
                        }
                        else {
                            icur = parseInt(getComputedStyle(obj)[key]);
                        }
                        var speed = (parseInt(json[key]) - icur) / 6;
                        if (speed !== 0) {
                            bstop = false;
                        }
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        if (key == "opacity") {
                            obj.style[key] = (icur + speed) / 100;
                        } else {
                            obj.style[key] = icur + speed + "px";
                        }
                    }
                    if (bstop) {
                        clearInterval(obj.timer);
                        fn && fn()
                    }
                }, 30)
            }
            animate($_(".box ul li:first-child"), {
                height: "106px"
            },function(){
                animate($_(".box ul li:nth-child(3)"),{
                    width:"106px"
                },function(){
                    animate($_(".box ul li:nth-child(2)"),{
                        height:"106px"
                    },function(){
                        animate($_(".box ul li:nth-child(4)"),{
                            width:"106px"
                        })
                    })
                })
            })

  <div class="box">
            <ul>
                <li class="box_left"></li>
                <li class="box_right"></li>
                <li class="box_top"></li>
                <li class="box_bottom"></li>
            </ul>
  </div>

   .box {
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 30px auto;
                position: relative;
            }

            li {
                list-style: none;
                width: 100px;
                position: absolute;
            }

            .box ul li:first-child {
                left: -3px;
                bottom: -3px;
                width: 1px;
                height: 0px;
                background-color: black;
            }

            .box ul li:nth-child(2) {
                right: -3px;
                top: -3px;
                width: 1px;
                height: 0px;
                background-color: black;
            }

            .box ul li:nth-child(3) {
                left: -3px;
                top: -3px;
                width: 0px;
                height: 1px;
                background-color: black;
            }

            .box ul li:nth-child(4) {
                bottom: -3px;
                width: 0px;
                height: 1px;
                background-color: black;
                right: -3px;
            }