Edit in JSFiddle

$(function () {
    
    var $overlay = $(".overlay");
    var $obj = $(".obj");
    
    $(".trig").click(function () {
        $overlay.css("display", "block");
        $obj.css("display", "block");
        setTimeout(function () {
            $overlay.addClass('in');
            $obj.addClass('in');
        }, 12);

        var timeout = setTimeout(function () {
            $overlay.removeClass('in');
            $obj.removeClass('in').addClass('out');
            setTimeout(function () {
                $overlay.css("display", "none");
                $obj.css("display", "none").removeClass('out');
            }, 500);
        }, 3000);

    });

});

<div class="wrapper">
    <button class="trig">push</button>
    <div class="overlay fade"> <span class="obj"></span>

    </div>
</div>

.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: none;
    overflow: auto;
    overflow-y: scroll;
    background: #ddd;
}
.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    transition: opacity .15s linear;
}
.fade.in {
    opacity: 0.5;
}
.obj {
    background:red;
    height:50px;
    width:50px;
    position: absolute;
    top: 0%;
    left:50%;
    margin-left:-25px;
    z-index: 1050;
    -moz-transition:all .5s ease-out;
    -webkit-transition:all .5s ease-out;
    -o-transition:all .5s ease-out;
    transition:all .5s ease-out;
}
.obj.in {
    top:50%;
    margin-top:-25px;
}
.obj.out {
    top:100%;
}