SOURCE

document.getElementsByClassName('button')[0].onclick = function () {
    console.log(1)
    document.getElementById('animat').className='show showmask'
    document.getElementById('animat').style.opacity='1';
    document.getElementsByClassName('mask')[0].style.opacity='.5'
}

document.getElementsByClassName('button2')[0].onclick = function () {
    document.getElementById('animat').className='hide'
    setTimeout(function () {
        document.getElementById('animat').style.opacity='0'
    }, 1000)

}

<div class="button ">按钮</div>

<div>
    <div class="a" style="height: 35px;width:300px;background:orangered;border-radius: 4px;" id="animat"></div>
</div>
<div class="button2">点击消失</div>
<div class="mask"></div>

.button {
    width: 100px;
    height: 30px;
    position: relative;
    z-index: 10;
}
.button2 {
    position: relative;
    z-index: 10;

}

#animat{
    position:relative;
    opacity: 0;
    z-index: 20;
}
.show {
    animation:show 1.5s ease-in-out;
    opacity: 1;
}
.hide {
    animation:hide 1s ease-in-out;
}

.mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
}
.showmask {
    animation:showmask 1s ease-in-out;
}

@keyframes show
{
    0%{
        transform: scale(1.5); 
        opacity: 0;
    }
    100%{
        transform: scale(1); 
        opacity: 1;
    }

}
           
@keyframes hide
{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
        opacity: 0;
    }

}

@keyframes showmask
{
    100%{
        opacity: .5;
    }

}